Strings

Methods

Er zijn een aantal nieuwe methodes aan het String object toegevoegd:

repeat

Herhaal een string een variabel aantal keer.

Syntax: str.repeat(count)

// ES6
var tekst = 'abc'.repeat(0); // ''
var tekst = 'abc'.repeat(3); // 'abcabcabc'
var tekst = 'abc'.repeat(3.5); // 'abcabcabc'. Waarde wordt naar integer geconverteerd

startsWith

Methode om te zoeken naar een substring.

Syntax: str.startsWith(searchString[, position]) (position = startpositie in string)

//ES6
var 'abcdef'.startsWith('ab'); // true
var 'abcdef'.startsWith('ab', 2); // false
var 'abcdef'.startsWith('bc', 1); // true

endsWith

Methode om te zoeken naar een substring.

Syntax: str.endsWith(searchString[, position]) (position = lengte van string)

//ES6
var 'abcdef'.endsWith('ef'); // true
var 'abcdef'.endsWith('ef', 4); // false, gezocht wordt in 'abcd'

includes

Methode om te zoeken naar een substring. Deze methode is case-sensitive.

Syntax: str.includes(searchString[, position]) (position = startpositie in string)

//ES6
var 'abcdef'.includes('de'); // true
var 'abcdef'.includes('DE'); // false
var 'abcdef'.includes('bc', 2); // false, gezocht wordt in 'cdef'
var 'abcdef'.includes('ef', 2); // true, gezocht wordt in 'cdef'

Template strings

Stringmanipulatie in JavaScript is altijd vrij beperkt geweest. Met template strings zijn er een aantal nieuwe functies bijgekomen. Een Template string gebruikt zgn. back-ticks ( ` ) in plaats van de single of double quotes die we gewend zijn.

String substituties

Met String substituties kunnen we JavaScript expressies gebruiken bij de definitie van een string literal. De syntax om de expressies te gebruiken binnen de literal is ${expressie}.

// ES6 String subtititie
var naam = 'Roel';
console.log(`Hallo, mijn naam is ${naam}.`); // "Hallo, mijn naam is Roel"

Maar ook rekenen:

// ES6 rekenen
var verbruik = 12
var kilometers = 360
console.log(`Mijn auto verbruikt ${kilometers/verbruik} liter in ${kilometers} kilometer.`);
// "Mijn auto verbruikt 30 liter in 360 kilometer"

En zelfs functies:

// functie substitutie
var mijnFunctie = function() {
   return "Dit is het resultaat van een functie"
}
console.log(`de functie gaf terug: ${mijnFunctie()}.`);
// "de functie gaf terug: Dit is het resultaat van een functie."

Multiline strings

Elke harde return binnen een template literal is onderdeel van de string.

console.log(`Dit is regel 1
Dit is regel 2`);

Tagged Templates

Tagged Templates maken gebruik van een Template Literal bij de aanroep van een functie. De Template Literal wordt getransformeerd tot de argumenten van de functie op de volgende manier:

// Tagged Template aanroep:
var naam = "Arie"
var leeftijd = 18
functieNaam`Dit is ${naam}, hij is ${leeftijd} jaar oud.`

De template literal wordt als volgt getransformeerd tot argumenten:

functieNaam(['Dit is ', ', hij is ', ' jaar oud.'], naam, leeftijd);

Dus eerst een array van alle losse string literals en vervolgens de expressies in de volgorde waarin ze in de Template Literal stonden.

OPDRACHT

Zie \03.strings\strings-tagged-templates.html voor een opdracht.