Introduzione
Una stringa è una sequenza di uno o più caratteri che può essere costituita da lettere, numeri o simboli. Le stringhe in JavaScript sono tipi di dati primitivi e immutabili, il che significa che non cambiano.
Poiché le stringhe sono il modo in cui visualizziamo e lavoriamo con il testo e il testo è il nostro modo principale di comunicare e comprendere attraverso i computer, le stringhe sono uno dei concetti fondamentali della programmazione con cui avere familiarità.
In questo articolo, impareremo come creare e visualizzare l'output delle stringhe, come concatenare le stringhe, come archiviare le stringhe nelle variabili e le regole di utilizzo di virgolette, apostrofi e nuove righe all'interno delle stringhe in JavaScript.
Creazione e visualizzazione dell'output delle stringhe
In JavaScript, ci sono tre modi per scrivere una stringa: possono essere scritti tra virgolette singole (' '), virgolette doppie (" ") o backticks (` `). Il tipo di citazione utilizzato deve corrispondere su entrambi i lati, tuttavia è possibile che tutti e tre gli stili possano essere utilizzati nello stesso script.
Le stringhe che usano virgolette doppie e virgolette singole sono effettivamente le stesse. Poiché non esiste alcuna convenzione o preferenza ufficiale per le stringhe a virgola singola o doppia, tutto ciò che conta è mantenere la coerenza nei file di programma del progetto.
'This string uses single quotes.';"This string uses double quotes.";Il terzo e più recente modo di creare una stringa è chiamato letterale template (template literal). I template literals usano il backtick (noto anche come accento grave) e funzionano allo stesso modo delle stringhe regolari con alcuni bonus aggiuntivi, che tratteremo in questo articolo.
`This string uses backticks.`;Il modo più semplice per visualizzare l'output di una stringa è stamparlo sulla console, con console.log():
console.log("This is a string in the console.");This is a string in the console.
Un altro modo semplice per generare un valore è inviare un popup di avviso al browser con alert():
alert("This is a string in an alert.");L'esecuzione della riga sopra produrrà l'output nell'interfaccia utente del browser.
alert() è un metodo meno comune di test e visualizzazione dell'output, in quanto può diventare rapidamente noioso chiudere gli avvisi.
Memorizzare una stringa in una variabile
Le variabili in JavaScript sono chiamati contenitori che conservano un valore, utilizzando le parole chiave var, const o let. Possiamo assegnare il valore di una stringa a una variabile denominata.
const newString = "This is a string assigned to a variable.";Ora che la variabile newString contiene la nostra stringa, possiamo fare riferimento e stamparla sulla console.
console.log(newString);Questo genererà il valore della stringa.
This is a string assigned to a variable.
Usando le variabili per sostituire le stringhe, non dobbiamo ridigitare una stringa ogni volta che vogliamo usarla, rendendo più semplice per noi lavorare e manipolare le stringhe all'interno dei nostri programmi.
Concatenare le stringhe
Concatenare significa unire due o più stringhe insieme per creare una nuova stringa. Per concatenare, utilizziamo l'operatore di concatenazione, rappresentato da un + simbolo. Il simbolo + è anche l'operatore addizione quando utilizzato con operazioni aritmetiche.
Creiamo una semplice istanza di concatenazione, tra "Sea" e "horse".
"Sea" + "horse";Seahorse
La concatenazione unisce le stringhe end-to-end, combinandole e producendo un nuovo valore di stringa. Se desideriamo avere uno spazio tra le parole Sea e horse, dovremmo includere un carattere di spazio bianco in una delle stringhe:
"Sea " + "horse";Sea horse
Uniamo stringhe e variabili contenenti valori di stringa con concatenazione.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author ".";My favorite poem is The Wide Ocean by Pablo Neruda.
Quando combiniamo due o più stringhe attraverso la concatenazione, creiamo una nuova stringa che possiamo usare in tutto il nostro programma.
Variabili nelle stringhe con valori Template Literals
Una caratteristica speciale della funzione letterale del modello è la possibilità di includere espressioni e variabili all'interno di una stringa. Invece di usare la concatenazione, possiamo usare la sintassi ${} per inserire una variabile.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = `My favorite poem is ${poem} by ${author}.`;My favorite poem is The Wide Ocean by Pablo Neruda.
Come possiamo vedere, includere espressioni nei valori template literals è un altro modo per ottenere lo stesso risultato. In questo caso, l'uso dei template literals potrebbe essere più semplice da scrivere e più conveniente.
String Literals e valori di stringa
Potresti notare che le stringhe che scriviamo nel codice sorgente sono racchiuse tra virgolette o backtick, ma l'output stampato effettivo non include alcuna citazione.
"Beyond the Sea";Beyond the SeaC'è una distinzione quando si fa riferimento a ciascuno di questi. Una stringa letterale (string literal) è la stringa così come è scritta nel codice sorgente, comprese le virgolette. Un valore di stringa (String Values) è ciò che vediamo nell'output e non include le virgolette.
Nell'esempio sopra, "Beyond the Sea" è una stringa letterale ed Beyond the Sea è un valore di stringa.
Citazioni e apostrofi di escape nelle stringhe
A causa del fatto che le virgolette vengono utilizzate per indicare le stringhe, è necessario fare considerazioni speciali quando si usano apostrofi e virgolette nelle stringhe. Il tentativo di utilizzare un apostrofo nel mezzo di una stringa a virgoletta singola, ad esempio, termina la stringa e JavaScript tenterà di analizzare il resto della stringa desiderata come codice.
Possiamo vederlo tentando di usare un apostrofo nella contrazione seguente I'm:
const brokenString = 'I'm a broken string';
console.log(brokenString);unknown: Unexpected token (1:24)Lo stesso vale per il tentativo di utilizzare le virgolette in una stringa tra virgolette doppie.
Per evitare che venga generato un errore in queste situazioni, abbiamo alcune opzioni che possiamo usare:
- Sintassi della stringa opposta
- Fuga dai caratteri
- Template literals
Esploreremo queste opzioni di seguito.
Utilizzare la sintassi della stringa alternativa
Un modo semplice per aggirare i casi isolati di stringhe potenzialmente rotte è quello di utilizzare la sintassi opposta di quella attualmente in uso.
Ad esempio, apostrofi nelle stringhe costruite con ".
"We're safely using an apostrophe in double quotes."Virgolette nelle stringhe costruite con '.
'Then he said, "Hello, World!"';Nel modo in cui combiniamo virgolette singole e doppie, possiamo controllare la visualizzazione di virgolette e apostrofi all'interno delle nostre stringhe. Tuttavia, quando stiamo lavorando per utilizzare una sintassi coerente all'interno dei file di programmazione del progetto, questo può essere difficile da mantenere in una base di codice.
Uso del carattere Escape (\)
Possiamo usare il carattere di escape backslash \ per impedire a JavaScript di interpretare una citazione come fine della stringa.
La sintassi di \' sarà sempre una virgoletta singola e la sintassi di \" sarà sempre una virgoletta doppia, senza alcun timore di spezzare la stringa.
Usando questo metodo, possiamo usare gli apostrofi nelle stringhe costruite con ".
'We\'re safely using an apostrophe in single quotes.'Possiamo anche usare le virgolette nelle stringhe costruite con ".
"Then he said, \"Hello, World!\"";Questo metodo ha un aspetto un po 'più disordinato, ma potrebbe essere necessario utilizzare sia un apostrofo che un segno di virgolette all'interno della stessa stringa, il che renderà necessario l'escaping.
Utilizzo dei template literals
I template literals sono definiti con i backtick e quindi sia le virgolette che gli apostrofi possono essere usati in sicurezza senza alcun tipo di escape o considerazione extra.
`We're safely using apostrophes and "quotes" in a template literal.`;
Oltre a prevenire la necessità della fuga di caratteri e consentire espressioni incorporate, anche i template literals forniscono supporto multilinea, di cui parleremo nel prossimo paragrafo.
Stringhe lunghe e Newline
Ci sono volte in cui potresti voler inserire un carattere di nuova riga o ritorno a capo nella stringa. I caratteri di escape \n o \r possono essere usati per inserire una nuova riga nell'output del codice.
const threeLines = "This is a string\nthat spans across\nthree lines.";This is a string
that spans across
three lines.
Questo funziona tecnicamente per ottenere il nostro output su più linee. Tuttavia, scrivere una stringa molto lunga su una sola riga diventerà rapidamente molto difficile da leggere e con cui lavorare. Possiamo usare l'operatore di concatenazione per mostrare la stringa su più righe.
const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";Invece di concatenare più stringhe, possiamo usare il carattere escape \ per fare l'escape alla nuova riga.
const threeLines = "This is a string\n\
that spans across\n\
three lines.";Nota : questo metodo non è preferito, in quanto potrebbe causare problemi con alcuni browser.
Per rendere il codice più leggibile, possiamo invece usare stringhe template literals. Questi eliminano la necessità di concatenare o usare il carattere escape su stringhe lunghe contenenti newline. La stringa e le nuove righe verranno conservate.
const threeLines = `This is a string
that spans across
three lines.`;This is a string
that spans across
three lines.
È importante essere consapevoli di tutti i modi di creare nuove righe e stringhe che si estendono su più righe, poiché basi di codice diversi potrebbero utilizzare vari standard.
Conclusione
In questo articolo, abbiamo approfondito le nozioni di base sull'uso delle stringhe in JavaScript, dalla creazione e visualizzazione di valori string literal utilizzando virgolette singole e doppie, creazione di valori template literals, concatenazione, escape e assegnazione di valori di stringa alle variabili.
