Articolo originale: JavaScript Split – How to Split a String into an Array in JS
Generalmente, un stringa rappresenta una sequenza di caratteri in un linguaggio di programmazione.
Diamo un'occhiata ad un esempio di stringa creata usando la sequenza di caratteri, "Yes, You Can DO It!". In JavaScript, possiamo creare una stringa in un paio di modi:
- Usando una stringa letterale come dato primitivo:
const msg = "Yes, You Can DO It!";
- Usando il costruttore
String()come un oggetto:
const msg = new String("Yes, You Can DO It!");
Un fatto interessante sulle stringhe in JavaScript è che possiamo accedere ai caratteri in una stringa tramite il loro indice. L'indice del primo carattere è 0 e per i caratteri successivi si incrementa di 1 per ciascun carattere. Pertanto possiamo accedere a ciascuno dei caratteri della stringa come segue:
let str = "Yes, You Can Do It!";
console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,
console.log(str[10]); // a
L'immagine sotto rappresenta la stessa cosa:
Oltre alla possibilità di accedere ai caratteri della stringa tramite i loro indici, JavaScript fornisce un sacco di metodi utili per accedere ai caratteri, eliminare parti di una stringa e manipolarle in vari modi.
In questo articolo, ti mostrerò un pratico metodo delle stringhe chiamato split(). Spero ti divertirai nel leggerlo.
Il metodo split() in JavaScript
Il metodo split() divide una stringa in due o più sottostringhe in base ad un separatore. Il separatore può essere un singolo carattere, un'altra stringa oppure una espressione regolare.
Dopo la divisione della stringa in più sottostringhe, il metodo split() le inserisce in un array e restituisce quest'ultimo come risultato. Non viene apportata alcuna modifica alla stringa originale.
Comprendiamo meglio come funziona con un esempio. Qui è riportata una stringa creata usando una stringa letterale:
let message = 'I am a Happy Go lucky Guy';
Possiamo chiamare il metodo split() sulla stringa message. Dividiamo la stringa sulla base del carattere spazio (' '). Qui il carattere spazio agisce come separatore.
// Dividiamo usando il carattere spazio
let arr = message.split(' ');
// L'array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]
// Accedi a ciascun elemento nell'array
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"
Lo scopo principale del metodo split() è estrapolare le parti della stringa che ti interessano per impiegarli successivamente per altre operazioni.
Come separare una stringa in ciascuno dei suoi caratteri
Puoi separare una stringa in ciascuno dei suoi caratteri usando una stringa vuota ('') come separatore. Nell'esempio seguente, dividiamo lo stesso messaggio usando una stringa vuota. Il risultato della separazione sarà un array contenente tutti i caratteri della stringa originaria.
console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]
💡 Nota che la separazione di una stringa vuota ('') usando una stringa vuota come separatore restituisce un array vuoto. Questa potrebbe essere una domanda nei tuoi prossimi colloqui di lavoro!
''.split(''); // returns []
Come separare una stringa in un singolo array
È possibile invocare il metodo split() su una stringa senza specificare un separatore. In questo caso nel metodo split() non è specificato nessun argomento.
Quando invochi il metodo split() su una stringa senza separatore, questo restituisce un array contenente l'intera stringa.
let message = 'I am a Happy Go lucky Guy';
console.log(message.split()); // restituisce ["I am a Happy Go lucky Guy"]
💡 Nota nuovamente che, chiamando il metodo split() su una stringa vuota ('') senza separatore, otterrai un array con una stringa vuota. Non viene restituito un array vuoto.Qui di seguito sono riportati due esempi in modo da evidenziare le differenze:
// Restituisce un array vuoto
''.split(''); // restituisce []
// Restituisce un array con una stringa vuota
''.split() // restituisce [""]
Come separare una stringa usando come separatore un carattere non presente nella stringa stessa
Solitamente, si usa come separatore un carattere che è parte della stringa che stiamo provando a dividere. Ci sono casi in cui potresti aver passato come argomento un separatore che non fa parte della stringa o non coincide con alcuna parte della stessa. In questo caso, il metodo split() restituisce un array con l'intera stringa come elemento.
Nell'esempio riportato sotto, la stringa del messaggio non ha il carattere virgola (,). Proviamo a dividere la stringa usando il separatore virgola (,).
let message = 'I am a Happy Go lucky Guy';
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]
💡 Dovresti tenere a mente questo fatto in quanto risulta molto utile durante il debug del codice per banali errori come passare il separatore errato nel metodo split(). Come separare una stringa con un limite
Se pensi che il metodo split() assuma solo il separatore come parametro opzionale, lascia che ti dica che ce n'è anche un altro. Puoi passare come parametro opzionale anche un valore limite al metodo split() .
string.split(splitter, limit);
Come indica il nome, il parametro limit limita il numero di divisioni. Significa che l'array risultante avrà solo il numero di elementi specificato nel parametro limite.
Nell'esempio seguente, separiamo una stringa usando lo spazio (' ') come divisore. Possiamo anche passare il numero 4 come limite. Il metodo split() restituisce un array con solo quattro elementi, ignorando il resto.
let message = 'I am a Happy Go lucky Guy';
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"]
Come separare usando una espressione regolare
Possiamo passare anche una espressione regolare (regex) come separatore al metodo split(). Consideriamo la stringa da dividere:
let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';
Separiamo la stringa ad ogni punto (.), punto esclamativo (!) e punto interrogativo (?). Possiamo scrivere un'espressione regolare che identifica quando questi caratteri si presentano. Quindi passiamo l'espressione regolare al metodo split() ed lo invochiamo sulla stringa soprariportata.
let sentences = message.split(/[.,!,?]/);
console.log(sentences);
Il risultato sarà il seguente:
Puoi usare il parametro limit per limitare l'output ai soli tre elementi iniziali, come segue:
sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);
Il risultato sarà il seguente:
💡 Se vuoi catturare i caratteri usati nell'espressione regolare nell'array risultante, devi modificare leggermente l'espressione regolare. Usa le parentesi tonde per catturare i caratteri corrispondenti. L'espressione regolare aggiornata sarà /([.,!,?])/.Come sostituire caratteri in una stringa usando il metodo Split()
Si possono risolvere molti problemi interessanti usando il metodo split() combinato con altri metodi di stringhe e array. Vediamone uno qui. Potrebbe essere comune dover sostituire tutte le occorrenze di una stringa con un altro carattere.
Per esempio, potresti voler creare un id di un elemento HTML dal valore di un nome. Il valore attribuito al nome potrebbe contenere uno spazio (' '), ma in HTML, il valore id non deve contenere alcuno spazio. Possiamo ovviare a questo problema nel modo seguente:
let name = 'Tapas Adhikary';
let subs = name.split(' ');
console.log(subs); // ["Tapas", "Adhikary"]
let joined = subs.join('-');
console.log(joined); // Tapas-Adhikary
Consideriamo che il nome è costiutuito da un nome proprio (Tapas) ed un cognome (Adhikary) separati da uno spazio. Nell'esempio per prima cosa separiamo il nome con uno spazio come separatore. Questo restituisce un array contente il nome ed il cognome come elementi, ovvero ['Tapas', 'Adhikary'].
Quindi usiamo il metodo degli array chiamato join() per unire gli elementi dell'array usando il carattere -. Il metodo join() restituisce una stringa unendo gli elementi con il carattere passato come parametro. Alla fine otteniamo il risultato finale con la stringa Tapas-Adhikary.
ES6: come separare un array con la destrutturazione
La specifica ECMAScript2015 (ES6) ha introdotto modi più innovativi per estrarre un elemento da un array ed assegnarlo a una variabile. Questa elegante sintassi è conosciuta come destrutturazione degli array (array destructuring). Possiamo usarla con il metodo split() per assegnare l'output ad una variabile facilmente e con meno codice.
let name = 'Tapas Adhikary';
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);
In questo esempio abbiamo separato il nome usando come separatore il carattere spazio. Quindi abbiamo assegnato il valore restituito dall'array a una coppia di variabili (firstName e lastName) usando la sintassi di destrutturazione degli array.
Prima di concludere...
👋 Vorresti continuare a scrivere codice ed imparare con me? Puoi trovare lo stesso contenuto qui in questo video YouTube. Devi solo aprire il tuo editor di codice preferito e iniziare.
Spero che tu abbia trovato utile questo articolo, e che leggerlo ti abbia aiutato a comprendere più chiaramente il metodo delle stringhe split() in JavaScript. Per acquisire una buona dimestichezza, usa gli esempi presentati per fare pratica più volte. Puoi trovare tutti gli esempi di codice nel mio repository GitHub.
Seguimi su Twitter (@tapasadhikary).
Potrebbero piacerti anche questi articoli (in inglese):