Stringhe e Template Literals

Le stringhe sono innanzitutto una primitiva, ne avevamo già parlato nell'articolo dedicato. Le stringhe nel senso più generale del termine sono una sequenza di caratteri delimitati da apici, singoli o doppi, o da accenti gravi.

Come per ogni primitiva, JavaScript mette a disposizione un oggetto, il quale mette a disposizioni a sua volta metodi e proprietà utili a manipolarle. Cosa che, ricordo, non può essere fatta direttamente, perché le primitive godono dell'immutabilità.

Creare una stringa

Creare una stringa è semplice:

1const stringa1 = "Sono una stringa";
2const stringa2 = "Sono sempre una stringa, ma tra apici singoli";
3const stringa3 = `Sono sempre una stringa, ma stavolta tra accenti gravi`;

La stringa3 dell'esempio qui sopra permette di fare qualcosa di speciale, ma lo vedremo tra qualche paragrafo.

Creare stringhe decisamente lunghe

Nulla vieta la creazione di stringhe con un bel po' di testo. Per evitare di scrivere tutto su una riga ci sono principalmente due modi:

Metodo 1: concatenare con l'operatore +

Nell'articolo dedicato alle operazioni con JavaScript avevo già accennato al fatto che il simbolo più (+), se usato con le stringhe, permette di concatenarle. Grazie a questa funzionalità possiamo quindi assegnare ad una variabile o ad una costante una stringa molto lunga, come ad esempio:

1let stringaLunga = "Questa stringa è volutamente molto lunga " +
2                   "così da far comprendere quanto sia semplice crearne una " +
3                   "grazie all'operatore più";

Metodo 2: usare il backslash \

Il secondo metodo non prevede la concatenazione, ma l'uso del carattere backslash \ (nella tastiera italiana si trova affianco all'uno), il quale indica che la stringa continua nella riga successiva.

1let stringaLunga = "Questa stringa è volutamente molto lunga \
2                   così da far comprendere quanto sia semplice crearne una \
3                   grazie all'uso del backslash.";

L'oggetto String

L'oggetto che JavaScript ci mette a disposizione si chiama String (la s maiuscola non è casuale). Questo oggetto ha una proprietà e diversi metodi che ci permettono di manipolare le stringhe.

La proprietà length

La proprietà length è di tipo readonly, ciò significa che possiamo solo leggerla, ma non modificarla. Riflette la lunghezza della stringa o per dirla meglio è il numero di caratteri dalla quale è composta.

1const stringa1 = "ciao";
2console.log(stringa.length); // Output: 4

I metodi più famosi

Di metodi, l'oggetto String ne mette a disposizione diversi, ma alcuni sono decisamente più utili di altri, come ad esempio:

• charAt(index): Restituisce il carattere che si trova alla posizione passata come parametro.
• concat(stringa, [, ...stringaN]): Concatena due o più stringhe e restituisce la nuova stringa concatenata.
• includes(stringa [, position]): Restituisce un valore booleano se la stringa passata come parametro è presente nella stringa sulla quale si sta effettuando la ricerca. Opzionalmente si può definire anche la posizione (l'indice) di partenza dalla quale partire con la ricerca.
• indexOf(valoreRicercato, indiceDiPartenza): Restituisce l'indice della prima occorrenza del valore ricercato. Se non viene trovato niente, allora verrà restituito -1
• match(espressioneRegolare): Restituisce il risultato della corrispondenza tra una stringa e un espressione regolare.
• replace(espressioneRegolare, nuovaStringa): Restituisce una nuova stringa sostituendo la parte che corrisponde con l'espressione regolare con una nuova stringa passata come parametro.
• slice(indiceInizio, indiceFine): Estrae una sezione di una stringa e restituisce una nuova stringa, senza modificare l'originale.
• split(separatore): Separa una stringa in base al separatore passato come parametro, restituendo un array di sotto stringhe.
• substring(indiceInizio, indiceFine): Restituisce una parte della stringa compresa dall'indice d'inizio e quello di fine.
• toLowerCase(): Restituisce la stringa chiamante con tutti i caratteri convertiti in minuscolo.
• toUpperCase(): Restituisce la stringa chiamante con tutti i caratteri convertiti in maiuscolo.
• trim(): Rimuove gli spazi bianchi all'inizio e alla fine della stringa.

I template literals

Come anticipato nei paragrafi precedenti, le stringhe possono essere delimitate con apici singoli, doppi o con accenti gravi. Con gli accenti gravi possiamo usare la sostituzione. Per quanto la documentazione non li definisca vere e proprie stringhe, i template literals o informalmente noti come template strings permettono di scrivere del testo e, se necessario, usare la sostituzione per sostituire determinate porzioni.

1const templateLiterals = `io risulterò in una stringa`;

Quella dichiarata nello snippet precedente è una normalissima stringa, niente di più, niente di meno.

1let a = 5;
2let b = 4;
3console.log(`La somma di a e b è ${a + b}`); // Output: La somma di a e b è 9

Grazie alla sintassi speciale ${} è possibile sfruttare la funzionalità di sostituzione offerta dall'uso dei backtick o accenti gravi.

Riprendendo le stringhe multi linea viste in precedenza con i template literals possiamo scrivere come segue:

1console.log(`con i template literals non c'è la necessità di usare
2caratteri extra o concatenazioni per andare a capo`);

Nei casi più complessi possiamo addirittura usare l'operatore ternario per definire il contenuto.

1const salutaUtente = `Ciao ${userIsLoggedIn() ? ${username} : 'Utente Anonimo' }`;
2console.log(salutaUtente); // Output: Ciao Utente Anonimo (se userIsLoggedIn è falso)
3                           // Output: Ciao Manuel (se userIsLoggedIn è vero)

Link utili

Per saperne di più sui metodi offerti dall'oggetto String rimando alla documentazione disponibile su MDN e alla documentazione ufficiale ECMAScript.