Tekenreeksen

Tekststrings, in programmeren meestal gewoon strings genoemd, zijn gewoon stukjes tekst. De mogelijkheid om tekst op te slaan is natuurlijk heel belangrijk bij het programmeren, net als getallen, en JavaScript heeft een heleboel leuke functies om het gebruik van tekenreeksen te vergemakkelijken.

In veel programmeertalen zijn er twee gegevenstypes voor het opslaan van tekst: Een char type, voor het opslaan van een enkel karakter, en een string type voor het opslaan van meerdere karakters. Maar in JavaScript is er geen char type - het string type wordt gebruikt ongeacht hoeveel karakters je wilt opslaan.

Een tekenreeks ( string ) definiëren

Allereerst wil ik je laten zien hoe je een tekenreeks definieert in JavaScript:

let s = "Hello, world!";

Dus, in tegenstelling tot een getal, wordt een tekststring ingekapseld tussen twee aanhalingstekens. In dit geval gebruik ik dubbele aanhalingstekens, maar in JavaScript kun je ook enkele aanhalingstekens gebruiken:

let s = 'Hello, world!';

Deze twee tekenreeksen zien er bij gebruik precies hetzelfde uit, dus welk type aanhalingstekens je gebruikt is voornamelijk aan jou.

Strings zijn in feite arrays van karakters

Wanneer een tekenreeks is gedefinieerd, kun je elk teken ervan benaderen via zijn index, precies alsof je met een array van tekens werkt (daarover later meer). Het eerste teken is index 0, het tweede is index 1 enzovoort. Dus, als we de "w" van onze string uit het bovenstaande voorbeeld willen openen, kunnen we dat eenvoudigweg als volgt doen:

let s = 'Hello, world!';
alert(s[7]);

Ik refereer eenvoudigweg naar index 7, gebruikmakend van de vierkante haakjes die we later in deze tutorial zullen gebruiken bij het werken met arrays, om het "w"-karakter uit de string te halen. Dit betekent ook dat je een string net zoals een array , op andere manieren kunt behandelen, bijvoorbeeld er doorheen lussen:

let s = 'Hello, world!';
for(let i = 0; i < 5; i++)
	alert(s[i]);

Escaping quotes

Als je de tekenreeks tussen aanhalingstekens zet, weet JavaScript waar deze begint en eindigt, zodat deze niet wordt vermengd met de eigenlijke code. Dit betekent echter ook dat je goed moet opletten als je aanhalingstekens wilt gebruiken binnen je strings. Hoe moet JavaScript bijvoorbeeld werken met dit voorbeeld?

let s = 'Hello, world, what's up?'; // Syntax error

Het antwoord is natuurlijk: Dat kan het niet. Het zal denken dat de tekenreeks eindigt na "wat", vanwege de enkele aanhalingstekens er direct achter, maar de rest zal resulteren in een syntaxisfout. Voor dit soort situaties zijn er twee opties: Je kunt aanhalingstekens door elkaar gebruiken:

let s = "Hello world, what's up?";

... of je kunt een escape-sequentie gebruiken om JavaScript te laten weten dat de enkele aanhalingstekens binnen de string moeten worden behandeld als een deel van de string en niet als het einde ervan:

let s = 'Hello world, what\'s up?';

Let op de backslash voor het enkele aanhalingsteken in de tekenreeks - dit wordt escapen van het teken genoemd, wat in feite betekent dat we de speciale betekenis wegnemen die het normaal heeft.

Speciale karakters

We hebben net gezien hoe we een aanhalingsteken kunnen escapen, om zijn speciale betekenis te verwijderen, door er een backslash voor te zetten. De forward slash kan echter ook worden gebruikt in combinatie met andere tekens om ze een speciale betekenis te geven. Een goed voorbeeld hiervan is het newline karakter, dat een nieuwe regel aan een string toevoegt:

let s = 'Hello world,\n what\'s up?';
alert(s);

Let op de \n in de tekenreeks - deze wordt geconverteerd in een nieuwe regel, zoals je kunt zien als je het voorbeeld uitvoert. Een ander voorbeeld van een speciaal teken is de \t, die wordt geconverteerd in een tab (horizontale tabulatie).

Op dit punt vraag je je misschien af: Als de backslash wordt gebruikt om andere tekens te escapen, hoe voeg ik dan een echte backslash in een tekenreeks in? Nou, je escape eenvoudigweg het escape-karakter door nog een backslash toe te voegen:

let s = 'Hello world \\ what\'s up?';
alert(s);

Template literals/strings

Je zou denken dat twee soorten aanhalingstekens (enkele en dubbele) genoeg zouden zijn om tekenreeksen in JavaScript te definiëren, maar in 2015, met de ES6-specificatie, werd een derde type tekenreeks geïntroduceerd. In plaats van aanhalingstekens gebruikt het backticks, en het komt met verschillende coole mogelijkheden die niet gevonden worden in gewone tekenreeksen. Dit is hoe het eruit ziet:

let s = `Hello, world!`;

Template literals, sometimes referred to as template strings, are not just about templates. They can definitely be used for that, as we'll see in a minute, but they are also just way more flexible than regular strings. For instance, they allow you to write strings that span multiple lines in your code:

let s = `A very, very
			long, long
			string...`;
alert(s);

Maar zoals je zult zien als je dit voorbeeld uitvoert, is alles hier inderdaad letterlijk - alle tekens worden meegenomen, zelfs tabs en meerdere spaties.

Placeholders

Let's move on to the reason why it's called template literals/strings: Placeholders. In a normal string, if you wanted to mix static text with the content of a variable, it might look like this:

let w = "world";
let s = "Hello, " + w + "!";
alert(s);

We use simple string concatenation to build a string. But using template literals instead, we can mix static text with variables, like this:

let w = "world";
let s = `Hello, ${w}!`;
alert(s);

This is also called string interpolation - I can put a placeholder inside the string by using the $ notation, and it will automatically be replaced by JavaScript. This is especially handy if you have complex strings with many variables, where the previous approach (string concatenation) could look quite messy.

And it doesn't have to be a simple variable - everything you put inside the template literal, as a placeholder, will be evaluated by the JavaScript engine. Here's an example where I do math inside the string:

let a = 21, b = 2;
let s = `a * b = ${a * b}`;
alert(s);

Tagged templates

For even more complex use cases, we have something called tagged templates. They are mostly there to solve very advanced templating tasks, and are therefore not commonly used by most JavaScript programmers. Because they solve a complex task, they are also not as easy to understand as the regular template literals, so if you don't fully understand this next part, don't worry about it - you will probably not need it anytime soon if you are new to JavaScript.

Tagged templates allows you to specify a function that will be called when your string is interpreted, which gives you endless possibilities in string creation. You can use this technique by placing the name of the function directly before your backtick string, like this:

let s = Highlight`${name} is ${age} years old`;

When this string is interpreted, all elements of this string will be passed to a function called Highlight. When we implement this function, we get full control of how the result will look, allowing us to do pretty much anything before returning the result.

In my example, I want to add a set of HTML bold tags around each of the placeholder values. Here's the full example:

function Highlight(strings, ...highlights)
{
	let result = "";
	for(let i = 0; i < highlights.length; i++)
	{
		result += strings[i];
		result += "<b>" + highlights[i] + "</b>";
	}
	result += strings[strings.length - 1];
	return result;
}

let name = "John Doe";
let age = 42;

let s = Highlight`${name} is ${age} years old`;
alert(s);

Pay special attention to the two parameters of the Highlight() function. The first one, called literals, will be an array of all parts of the passed in string that are NOT placeholder values. For the second parameter, called highlights, we use the spread syntax to get an array of the placeholder values passed to the string (in this case, name and age). I then use these two arrays to re-construct the string while adding HTML tags around the placeholder values.

As mentioned already, tagged templates are pretty much only used to solve complex templating tasks, but I wanted to give you quick glimpse of how it works anyway, for completeness.

Samenvatting

Dit artikel ging over leren hoe je een tekenreeks definieert en de verschillende manieren om dat te doen in JavaScript. De volgende stap is leren hoe ermee te werken en ze te manipuleren, en gelukkig voor ons heeft JavaScript het ingebouwde String object , dat ons veel functionaliteit biedt om precies dat te doen.