Hoe formatteer je een string in JavaScript?

In JavaScript is een tekenreeks een groep tekens tussen enkele of dubbele aanhalingstekens. Er zijn veel manieren om tekenreeksen in JavaScript op te maken.

U kunt specifieke methoden of operatoren gebruiken om tekenreeksen te combineren. U kunt zelfs specifieke bewerkingen uitvoeren om te bepalen welke tekenreeks waar en wanneer verschijnt.

Leer hoe u uw JavaScript-tekenreeksen kunt opmaken met aaneenschakelingsmethoden en letterlijke sjablonen.

String aaneenschakeling

Met JavaScript kunt u strings op verschillende manieren samenvoegen. Een handige benadering is de concat() methode. Deze methode gebruikt twee of meer strings. Het gebruikt een enkele aanroepende string en neemt een of meer strings als argumenten.

const voornaam = "John";
const achternaam = "Doe";
laten stringVal;
stringVal = voornaam.concat("", achternaam);
troosten.log (stringVal);

Hier voegt concat de tekenreeksargumenten (een spatie en achternaam) samen met de aanroepende tekenreeks (voornaam). De code slaat vervolgens de resulterende nieuwe string op in een variabele (stringVal) en drukt de nieuwe waarde af naar de browserconsole:

Een andere manier om een ​​verzameling tekenreeksen samen te voegen, is door de plus-operator te gebruiken. Met deze methode kunt u tekenreeksvariabelen en letterlijke tekenreeksen combineren om nieuwe tekenreeksen te maken.

const voornaam = "John";
const middleName = "Mike";
const achternaam = "Doe";
laten stringVal;
stringVal = voornaam + "" + middelsteNaam + "" + achternaam;
troosten.log (stringVal);

De bovenstaande code drukt de volgende uitvoer af naar de console:

Een derde benadering voor het samenvoegen van uw JavaScript-strings vereist het gebruik van een plus- en gelijkteken. Met deze methode kunt u een nieuwe string toevoegen aan het einde van een bestaande.

const voornaam = "John";
const achternaam = "Doe";
laten stringVal;
stringVal = voornaam;
stringVal += "";
stringVal += achternaam;
troosten.log (stringVal);

Deze code voegt een spatie en de waarde van de lastName-variabele toe aan de firstName-variabele, waardoor de volgende uitvoer wordt geproduceerd:

Letterlijke sjabloon

Sjabloonliterals zijn een ES6-functie waarmee u JavaScript-tekenreeksen kunt opmaken. Een letterlijke sjabloon gebruikt een paar backticks (`) om tekenreeksen weer te geven. Met deze methode voor het formatteren van tekenreeksen kunt u schonere tekenreeksen met meerdere regels weergeven in JavaScript.

laten html;
html = '<ul>
<li> Naam: John Doe </li>
<li> Leeftijd: 24 </li>
<li> Functie: software-engineer </li>
</ul>`;
document.body.innerHTML = html;

De bovenstaande JavaScript-code maakt gebruik van HTML om een ​​lijst met drie items in de browser af te drukken:

Om dezelfde uitvoer te krijgen zonder letterlijke sjablonen (of vóór letterlijke sjablonen), moet u aanhalingstekens gebruiken. U zou de code echter niet over meerdere regels kunnen uitbreiden, zoals u kunt met letterlijke sjablonen.

laten html;
html= "<ul><li>Naam: John Doe</li><li>Leeftijd: 24</li><li>Functie: software-engineer</li></ul>";
document.body.innerHTML = html;

String-interpolatie

Met letterlijke sjablonen kunt u uitdrukkingen in uw JavaScript-reeksen gebruiken via een proces dat interpolatie wordt genoemd. Met stringinterpolatie kunt u uitdrukkingen of variabelen in uw strings insluiten met behulp van de ${expressie} tijdelijke aanduiding. Dit is waar de waarde van letterlijke JavaScript-sjablonen echt duidelijk wordt.

laat gebruikersnaam = "Jane Doe";
laten leeftijd = 21;
laat baan = "Webontwikkelaar";
laten ervaring = 3;
laten html;
html = '<ul>
<li> Naam: ${gebruikersnaam} </li>
<li> Leeftijd: ${leeftijd} </li>
<li> Functietitel: ${job} </li>
<li> Jarenlange ervaring: ${ervaring} </li>
<li> Ontwikkelaarsniveau: ${experience < 5? "Junior tot middelbaar": "Senior"} </li>
</ul>`;
document.body.innerHTML = html;

De bovenstaande code produceert de volgende uitvoer in de console:

De eerste vier argumenten van de ${expressie} tijdelijke aanduiding zijn tekenreeksvariabelen, maar de vijfde is een voorwaardelijke uitdrukking. De uitdrukking is afhankelijk van de waarde van een van de variabelen (ervaring) om te bepalen wat deze in de browser moet weergeven.

Elementen op uw webpagina opmaken met JavaScript

Afgezien van de functionele associatie met de ontwikkeling van webpagina's, werkt JavaScript met HTML om het ontwerp en de lay-out van een webpagina te beïnvloeden. Het kan de tekst manipuleren die op een webpagina verschijnt, zoals het geval is met letterlijke sjablonen.

Het kan zelfs HTML naar afbeeldingen converteren en op een webpagina weergeven.