Stringhe e template literal in JavaScript: backtick, interpolazione, metodi

Tre modi per scrivere una stringa

JavaScript ti offre tre delimitatori per le stringhe. Due sono intercambiabili; il terzo fa di più.

const single = 'hello';
const double = "hello";
const backtick = `hello`;

console.log(single === double, double === backtick);

Le virgolette singole e doppie producono stringhe identiche: scegline uno e resta coerente (la maggior parte dei codebase moderni usa le singole di default o lascia decidere a un formatter). I backtick producono un template literal, ed è qui che le cose si fanno interessanti: permettono l'interpolazione e possono estendersi su più righe.

Dietro le quinte tutti e tre producono lo stesso tipo primitivo stringa. Il delimitatore è solo una scelta di sintassi.

Sequenze di escape e virgolette incorporate

Dentro una stringa, il backslash avvia una sequenza di escape. Le più comuni sono \n (a capo), \t (tabulazione), \\ (backslash letterale) e \" / \' per inserire lo stesso tipo di virgoletta con cui hai aperto la stringa:

const quote = "She said \"hi\" and left.";
const path = "C:\\Users\\Rosa";
const lines = "first\nsecond\nthird";

console.log(quote);
console.log(path);
console.log(lines);

Puoi evitare la maggior parte degli escape scegliendo l'altro tipo di virgolette: 'She said "hi" and left.' non ha bisogno di backslash. Meglio il pragmatismo del dogma.

Template literal: il superpotere dei backtick

Un template literal fa due cose che le stringhe normali non sanno fare. Primo, interpola espressioni con ${...}:

const name = "Ada";
const age = 36;

const greeting = `Hello, ${name}. You are ${age} years old.`;
console.log(greeting);

Qualsiasi cosa dentro ${...} è un'espressione JavaScript, non solo il nome di una variabile. Aritmetica, chiamate di funzione, operatori ternari, persino altri template literal: vale tutto.

const price = 19.99;
const qty = 3;
const user = { name: "rosa" };

console.log(`Total: $${(price * qty).toFixed(2)}`);
console.log(`Hi, ${user.name.toUpperCase()}!`);
console.log(`Status: ${qty > 0 ? "in stock" : "sold out"}`);

Secondo, i template literal si estendono su più righe senza bisogno di \n:

const message = `Dear customer,

Your order has shipped.
Expect delivery in 3-5 days.

Thanks.`;

console.log(message);

Gli a capo nel sorgente diventano a capo nella stringa. Per tutto ciò che è più lungo di una breve etichetta, i backtick sono quasi sempre la scelta giusta.

L'interpolazione batte la concatenazione

Prima dei template literal, l'unico modo per costruire una stringa dinamica era l'operatore +:

const name = "Ada";
const age = 36;

const old = "Hello, " + name + ". You are " + age + " years old.";
const modern = `Hello, ${name}. You are ${age} years old.`;

console.log(old);
console.log(modern);

Entrambi producono lo stesso output. Il template literal si legge come la frase che sta costruendo, mentre la versione con + ti costringe a tenere d'occhio virgolette, spazi e operatori di concatenazione. Usa + solo quando aggiungi una piccola cosa a una stringa esistente. Per tutto il resto, usa i backtick.

Le stringhe sono immutabili

Ogni metodo che sembra modificare una stringa in realtà ne restituisce una nuova:

const s = "hello";

s.toUpperCase();           // returns "HELLO" - discarded
console.log(s);            // still "hello"

const loud = s.toUpperCase();
console.log(loud);         // "HELLO"

Se vuoi la modifica, devi assegnare il risultato da qualche parte. È un errore tipico di chi inizia: scrivere s.replace("a", "b") e aspettarsi che s cambi. Non cambia. In JavaScript le stringhe sono come i numeri: il valore in sé non può essere modificato, puoi solo far puntare la variabile a un nuovo valore.

I metodi delle stringhe che userai davvero

L'API completa delle stringhe è ampia. Questi sono i pochi che userai ogni giorno:

const s = "  Hello, World!  ";

console.log(s.length);                     // 17
console.log(s.trim());                     // "Hello, World!"
console.log(s.toLowerCase());              // "  hello, world!  "
console.log(s.includes("World"));          // true
console.log(s.startsWith("  He"));         // true
console.log(s.replace("World", "Ada"));    // "  Hello, Ada!  "
console.log(s.split(","));                 // ["  Hello", " World!  "]
console.log(s.slice(2, 7));                // "Hello"

Qualche nota da tenere a mente:

• length è una proprietà, non un metodo: niente parentesi.
• replace con una stringa semplice sostituisce solo la prima occorrenza. Usa replaceAll o una regex con il flag g per sostituirle tutte.
• slice(start, end) accetta un intervallo semiaperto: il carattere in posizione end non è incluso.
• Gli indici negativi in slice contano dalla fine: s.slice(-3) restituisce gli ultimi tre caratteri.

Accedere ai caratteri e scorrerli

Le stringhe si comportano come array di caratteri in sola lettura. Puoi accedere a un indice e scorrerle, ma non puoi assegnare un valore a una posizione:

const s = "hello";

console.log(s[0]);      // "h"
console.log(s[4]);      // "o"
console.log(s[99]);     // undefined

s[0] = "H";             // silently ignored (or throws in strict mode)
console.log(s);         // still "hello"

for (const ch of s) {
    console.log(ch);
}

for...of scorre i code point, e gestisce correttamente la maggior parte dell'Unicode. Usare gli indici (s[i]) scorre le unità di codice UTF-16, che possono spezzare a metà le emoji e altri caratteri fuori dal BMP. Per il testo normale vanno bene entrambi; per qualsiasi testo generato dagli utenti, preferisci for...of o [...s].

Tagged template literal

C'è un'altra forma che vale la pena conoscere, anche se non la scriverai spesso. Un template literal con tag chiama una funzione passandole come argomenti separati i pezzi di stringa statici e i valori interpolati:

function highlight(strings, ...values) {
    return strings.reduce((out, str, i) => {
        const val = values[i] !== undefined ? `[${values[i]}]` : "";
        return out + str + val;
    }, "");
}

const name = "Ada";
const score = 95;

console.log(highlight`User ${name} scored ${score} points.`);

La funzione tag decide l'aspetto della stringa finale: può fare l'escape dell'HTML, costruire SQL in modo sicuro, compilare CSS o analizzare GraphQL. Vedrai questo pattern nelle librerie (styled-components, graphql-tag, lit-html) molto più spesso di quanto ne scriverai uno tu. Ma quando ti serve un'elaborazione personalizzata delle stringhe, i tag sono lo strumento più pulito.

Errori comuni

Una breve lista delle cose che mettono in difficoltà:

• Dimenticare di assegnare il risultato dei metodi. s.trim() da solo non fa nulla.
• Usare + per concatenare un numero e una stringa. "Age: " + 30 + 5 dà "Age: 305", non "Age: 35". I template literal evitano il problema: `Age: ${30 + 5}`.
• Confondere == con il confronto tra stringhe. Parleremo bene dell'uguaglianza più avanti, ma "1" == 1 è true e "1" === 1 è false. Preferisci ===.
• Dare per scontato che length sia il numero di caratteri. Per le emoji e gli altri caratteri a coppia surrogata, "".length vale 2, non 1. Usa [..."".length] o Array.from(s).length quando ti servono i caratteri come li percepisce l'utente.

Prossimo passo: numeri e BigInt

Le stringhe sono un tipo primitivo; i numeri sono un altro, e il sistema numerico di JavaScript ha le sue stranezze: un unico tipo Number sia per gli interi sia per i decimali, più BigInt per quando non basta. È l'argomento della prossima pagina.