Come si formatta una stringa in JavaScript?

In JavaScript, una stringa è un gruppo di caratteri racchiuso da una coppia di virgolette singole o doppie. Esistono molti modi per formattare le stringhe in JavaScript.

È possibile utilizzare metodi o operatori specifici per combinare le stringhe. Puoi persino eseguire operazioni specifiche per decidere quale stringa appare dove e quando.

Scopri come formattare le stringhe JavaScript utilizzando metodi di concatenazione e letterali modello.

Concatenazione di stringhe

JavaScript consente di concatenare stringhe utilizzando diversi approcci. Un approccio utile è il concat() metodo. Questo metodo utilizza due o più stringhe. Utilizza una singola stringa chiamante e accetta una o più stringhe come argomenti.

const nome = "John";
const cognome = "Dai";
permettere stringaVal;
stringVal = primoNome.concat("", cognome);
consolare.log (stringVal);

Qui, concat unisce gli argomenti stringa (uno spazio vuoto e lastName) alla stringa chiamante (firstName). Il codice memorizza quindi la nuova stringa risultante in una variabile (stringVal) e stampa il nuovo valore nella console del browser:

Un altro modo per concatenare una raccolta di stringhe consiste nell'utilizzare l'operatore più. Questo metodo consente di combinare variabili stringa e valori letterali stringa per creare nuove stringhe.

const nome = "John";
const middleName = "Mike";
const cognome = "Dai";
permettere stringaVal;
stringVal = firstName + "" + middleName + "" + cognome;
consolare.log (stringVal);

Il codice sopra stampa il seguente output sulla console:

Un terzo approccio alla concatenazione delle stringhe JavaScript richiede l'uso di un segno più e uguale. Questo metodo consente di aggiungere una nuova stringa alla fine di una esistente.

const nome = "John";
const cognome = "Dai";
permettere stringaVal;
stringVal = firstName;
stringaVal += "";
stringVal += cognome;
consolare.log (stringVal);

Questo codice aggiunge uno spazio vuoto e il valore della variabile lastName alla variabile firstName, producendo il seguente output:

Letterali modello

I valori letterali del modello sono una funzionalità di ES6 che consente di formattare le stringhe JavaScript. Un template letterale utilizza una coppia di apici inversi (`) per visualizzare le stringhe. Questo metodo di formattazione delle stringhe consente di visualizzare stringhe multilinea più pulite in JavaScript.

permettere html;
html = `<Ul>
<li> Nome: John Doe </li>
<li> Età: 24 </li>
<li> Lavoro: Ingegnere informatico </li>
</ul>`;
documento.body.innerHTML = html;

Il codice JavaScript sopra utilizza HTML per stampare un elenco di tre elementi nel browser:

Per ottenere lo stesso output senza template literal (o prima di template literal), dovresti usare le virgolette. Tuttavia, non saresti in grado di estendere il codice su più righe come puoi con i template letterali.

permettere html;
html = "<Ul><li>Nome: John Doe</li><li>Età: 24</li><li>Lavoro: Ingegnere informatico</li></ul>";
documento.body.innerHTML = html;

Interpolazione di stringhe

I valori letterali del modello consentono di utilizzare espressioni nelle stringhe JavaScript attraverso un processo chiamato interpolazione. Con l'interpolazione delle stringhe puoi incorporare espressioni o variabili nelle tue stringhe usando il file ${espressione} segnaposto. È qui che il valore dei valori letterali del modello JavaScript diventa veramente evidente.

let userName = "Jane Doe";
permettere età = 21;
lascia lavoro = "Sviluppatore web";
permettere esperienza = 3;
permettere html;
html = `<Ul>
<li> Nome: ${userName} </li>
<li> Età: ${age} </li>
<li> Titolo di lavoro: ${job} </li>
<li> Anni di esperienza: ${experience} </li>
<li> Livello sviluppatore: ${esperienza < 5? "Da Junior a Intermedio": "Anziano"} </li>
</ul>`;
documento.body.innerHTML = html;

Il codice sopra produce il seguente output nella console:

I primi quattro argomenti dell'art ${espressione} segnaposto sono variabili stringa, ma la quinta è un'espressione condizionale. L'espressione si basa sul valore di una delle variabili (esperienza), per dettare ciò che dovrebbe visualizzare nel browser.

Elementi di formattazione sulla tua pagina web con JavaScript

Oltre alla sua associazione funzionale con lo sviluppo di pagine Web, JavaScript funziona con HTML per influenzare il design e il layout di una pagina Web. Può manipolare il testo che appare su una pagina web, come nel caso dei template letterali.

Può anche convertire HTML in immagini e visualizzarle su una pagina web.