Articolo originale: https://www.freecodecamp.org/news/javascript-multiline-string-how-to-create-multi-line-strings-in-js/
In questo articolo, imparerai tre modi diversi per creare stringhe multi-riga in JavaScript.
Parlerò prima delle basi delle stringhe in JavaScript ed esaminerò i template literal. Poi impareremo come creare una stringa che occupa più righe con l'aiuto di esempi di codice.
Ecco quello che tratteremo:
- Cos'è una stringa in JavaScript?
1.1 Cosa sono i template literal? Come e perché usarli - Come creare stringhe multi-riga
2.1 Come creare stringhe multi-riga con un template literal
2.2 Come creare stringhe multi-riga con l'operatore+
2.3 Come creare stringhe multi-riga con l'operatore\
Cos'è una stringa in JavaScript? Un'introduzione su come creare una stringa in JS
Le stringhe costituiscono un efficace modo per comunicare tramite testo.
Una stringa è una sequenza ordinata di caratteri. In modo specifico, una stringa è una sequenza di uno o più caratteri che possono essere lettere, numeri o simboli (come i segni di interpunzione).
Esistono tre modi per creare una stringa in JavaScript:
- Usando le virgolette singole.
- Usando le virgolette doppie.
- Usando i backtick (accento grave).
Ecco come creare una stringa con delle virgolette singole:
// stringa creata usando le virgolette singole ('')
let favePhrase = 'Hello World!';
Ecco come creare una stringa con delle virgolette doppie:
// stringa creata usando le virgolette doppie ("")
let favePhrase = "Hello World!";
Ecco come creare una stringa usando i backtick:
// stringa creata usando i backtick (``)
let favePhrase = `Hello World!`;
Quest'ultimo modo per creare una stringa in JavaScript è detto template literal.
Ho creato una variabile chiamata favePhrase.
All'interno della variabile, ho salvato la stringa Hello World!, che ho creato usando tre modi diversi.
Per vedere l'output della stringa nella console del browser, passa il nome della variabile a console.log();.
Ad esempio, volendo vedere l'output della stringa creata con le virgolette doppie:
// stringa creata usando le virgolette doppie ("")
let favePhrase = "Hello World!";
// stampa la stringa sulla console
console.log(favePhrase);
// output
// Hello World!
Creare stringhe usando virgolette singole e doppie funziona alla stesso modo, quindi non c'è differenza tra le due.
Puoi scegliere di usarle entrambe in un file. Detto ciò, è preferibile rimanere coerenti all'interno di un file.
Quando crei una stringa assicurati che il tipo di virgoletta sia lo stesso da entrambi i lati.
// Non fare questo
let favePhrase = 'Hello World!";
console.log(favePhrase);
// output
// Uncaught SyntaxError: Invalid or unexpected token (at test.js:2:18)
Un'altra cosa da notare è che puoi usare un tipo di virgoletta all'interno di un altro.
Ad esempio, puoi usare virgolette doppie all'interno di virgolette singole, in questo modo:
let favePhrase = 'My fave phrase is "Hello World"!';
Assicurati che le virgolette interne non siano uguali a quelle esterne perché questo causerebbe un errore:
// Non fare questo
let favePhrase = 'My fave phrase is 'Hello World'! ';
console.log(favePhrase)
// output
//Uncaught SyntaxError: Unexpected identifier (at test.js:2:38)
Accade la stessa cosa se provi a usare l'apostrofo all'interno di virgolette singole:
// Non fare questo
let favePhrase = 'My fave phrase is "Hello world"! Isn't it awesome?';
console.log(favePhrase);
// output
// Uncaught SyntaxError: Unexpected identifier (at test.js:3:56)
Ho usato virgolette doppie all'interno di virgolette singole. Fin qui tutto bene, ma i problemi sono iniziati quando ho usato l'apostrofo.
Per poter utilizzare le virgolette singole occorre utilizzare il carattere di escape \:
let favePhrase = 'My fave phrase is \'Hello World\'! ';
console.log(favePhrase);
// output
// My fave phrase is 'Hello World'!
Vale lo stesso per l'apostrofo (in fondo si tratta dello stesso carattere):
let favePhrase = 'My fave phrase is "Hello world"! Isn\'t it awesome?';
console.log(favePhrase);
// output
// My fave phrase is "Hello world"! Isn't it awesome?
Cosa sono i template literal in JavaScript? Come e perché usare i template literal in JavaScript
Precedentemente abbiamo creato un template literal usando i backtick.
I template literal sono stati introdotti con ES6 e consentono di svolgere operazioni più complesse usando le stringhe.
Una di queste è l'abilità di incorporare una variabile inline all'interno di una stringa, in questo modo:
let firstName = 'John';
let lastName = 'Doe';
console.log(`Hi! My first name is ${firstName} and my last name is ${lastName}!`);
// output
//Hi! My first name is John and my last name is Doe!
Nell'esempio qui sopra ho creato due variabili, firstName e lastName, che contengono rispettivamente un nome e un cognome.
Usando console.log(), ho stampato una stringa creata con i backtick, anche detta template literal.
All'interno della stringa, ho incorporato le due variabili.
A questo scopo, occorre racchiudere il nome della variabile in ${} – questa pratica è detta interpolazione di stringhe, e consente di inserire qualsiasi variabile senza necessità di ricorrere alla concatenazione, come qui sotto:
let firstName = 'John';
let lastName = 'Doe';
console.log("Hi! My first name is " + firstName + " and my last name is " + lastName + "!");
// output
// Hi! My first name is John and my last name is Doe!
Un'altra cosa che i template literal ti consentono di fare è di usare al loro interno virgolette singole e doppie e apostrofi senza bisogno di dover eseguire l'escape:
let favePhrase = `My fave phrase is "Hello World" ! Isn't it awesome?`
console.log(favePhrase);
// output
// My fave phrase is "Hello World" ! Isn't it awesome?
I template literal ti permettono anche di creare stringhe su più righe, come impareremo nelle prossime sezioni.
Come creare stringhe multi-riga in JavaScript
Esistono tre modi per creare stringhe che occupano più righe:
- Usando i template literal
- Usando l'operatore
+– l'operatore di concatenazione in JavaScript. - Usando l'operatore
\– l'operatore backslash o carattere di escape.
Se scegli di usare le virgolette singole o doppie invece dei template literal per creare una stringa che occupa più righe, dovrai usare l'operatore + o l'operatore \.
Come creare stringhe multi-riga con i template literal in JavaScript
I template literal ti permettono di creare una stringa che occupa più righe:
let learnCoding = `How to start learning web development?
- Learn HTML
- Learn CSS
- Learn JavaScript
Use freeCodeCamp to learn all the above and much, much more !
`
console.log(learnCoding);
// output
// How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more !
Usare i template literal è il modo più diretto per creare delle stringhe multi-riga.
Come creare stringhe multi-riga usando l'operatore + in JavaScript
Consideriamo lo stesso esempio della sezione precedent. Ecco come riscriverlo usando l'operatore +:
let learnCoding = 'How to start learning web development?' +
' - Learn HTML' +
' - Learn CSS' +
' - Learn JavaScript' +
' Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
// output
// How to start learning web development? - Learn HTML - Learn CSS - Learn JavaScript Use freeCodeCamp to learn all the above and much, much more!
Occorre anche includere il carattere nuova riga \n per far apparire le frasi su righe diverse:
let learnCoding = 'How to start learning web development?\n' +
' - Learn HTML\n' +
' - Learn CSS\n' +
' - Learn JavaScript\n' +
' Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
// output
//How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more!
Come creare stringhe multi-riga usando l'operatore \ in JavaScript
Se volessi usare l'operatore \, ecco come riscrivere l'esempio della sezione precedente:
let learnCoding = 'How to start learning web development? \n \
- Learn HTML \n \
- Learn CSS\n \
- Learn JavaScript \n \
Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
// output
// let learnCoding = 'How to start learning web development? \n \
// - Learn HTML \n \
// - Learn CSS\n \
// - Learn JavaScript \n \
//Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
In questo esempio, ho creato una stringa multi-riga usando virgolette singole.
Ho dovuto usare il carattere nuova riga \n, seguito dall'operatore \ per far apparire la stringa su più righe.
Assicurati di posizionare l'operatore \ dopo il carattere nuova riga \n.
Conclusione
Ecco fatto! Adesso sai come creare delle stringhe multi-riga in JavaScript.
Per imparare di più su JavaScript, dai un'occhiata alla certificazione di freeCodeCamp Algoritmi e Strutture di Dati in JavaScript.
Si tratta di un corso gratuito ben strutturato in cui imparerai in modo interattivo. Alla fine dovrai costruire 5 progetti per ottenere la certificazione e consolidare le tue conoscenze.
Grazie per aver letto questo articolo!