Stringhe in JavaScript, l'oggetto String

Come per i valori numerici, anche le stringhe hanno un corrispondente oggetto predefinito che prevede metodi per la loro manipolazione. Tramite l'operatore new possiamo creare istanze di oggetti String come mostrato di seguito:

var x = new String("Una nuova stringa");

Come avviene per i numeri, JavaScript si occupa di effettuare automaticamente le opportune conversioni quando utilizziamo nella stessa espressione valori ed oggetti di tipo stringa:

var x = new String("Una nuova stringa");
var y = x + " concatenata";

Nell'esempio l'oggetto x viene convertito nella stringa in esso contenuta prima di effettuare la concatenazione tramite l'operatore +, o meglio, x viene sostituito dall'invocazione del metodo x.valueOf().

Nel caso degli oggetti String accade anche la conversione opposta. Se invochiamo un metodo direttamente da una variabile o da una costante di tipo stringa, JavaScript crea un'istanza del corrispondente oggetto String ed esegue il metodo, senza tuttavia cambiare il tipo di dato della variabile originaria. Nel seguente esempio viene invocato il metodo valueOf() direttamente da una variabile di tipo stringa:

var x = "Una stringa";
var y = x.valueOf();

length, la lunghezza di una stringa in JavaScript

Un oggetto String dispone della proprietà length che indica il numero di caratteri di cui è composta una stringa:

var x = new String("Una nuova stringa");
var y = x.length;		//17

Estrarre un carattere da una stringa

JavaScript non prevede un tipo di dato specifico per i caratteri. Un carattere non è altro che una stringa di dimensione uno. Per estrarre un carattere da una stringa possiamo utilizzare due approcci. Il primo approccio sfrutta il metodo charAt() che prende come argomento la posizione del carattere all'interno della stringa partendo da zero:

var x = "Una nuova stringa".charAt(2);

Nell'esempio viene estratto il carattere "a" corrispondente alla terza posizione all'interno della stringa.

Il secondo approccio si basa su una rappresentazione della stringa come array di caratteri, per cui possiamo ottenere lo stesso risultato dell'esempio precedente con la seguente istruzione:

var x = "Una nuova stringa"[2];

Da notare però che l'accesso ad un carattere tramite l'approccio ad array è in sola lettura. In altre parole, non possiamo modificare l'i-esimo carattere di una stringa come se fosse un normale elemento di un array.

Replace: sostituire i caratteri in una stringa

Per sostituire uno o più caratteri all'interno di una stringa possiamo ricorrere al metodo replace(). Nella sua forma più semplice esso prende due argomenti: la sottostringa da ricercare e la nuova stringa con cui sostituire la sottostringa. Ad esempio, la seguente istruzione sostituisce il carattere "s" con il corrispondente carattere maiuscolo "S":

var x = "Una nuova stringa".replace("s", "S");

Facciamo notare come il metodo replace() utilizzato come nell'esempio sostituisce soltanto la prima occorrenza della stringa "s". Esso ha in realtà potenziali maggiori se utilizzato con le espressioni regolari. Lo analizzeremo in maniera più approfondita quando tratteremo l'argomento.

IndexOf, individuare le sottostringhe

Possiamo individuare una sottostringa all'interno di una stringa utilizzando il metodo indexOf():

var x = "Una nuova stringa".indexOf("nuova");

Il metodo restituisce la posizione della prima occorrenza della stringa passata come argomento. Se non viene individuata nessuna occorrenza indexOf() restituisce -1.

Al contrario, il metodo lastIndexOf() restituisce la posizione dell'ultima occorrenza di una stringa:

var x = "Una nuova stringa".lastIndexOf("n");

In questo caso il valore restituito è 14, cioè la posizione dell'ultimo carattere "n" nella stringa.

Per entrambi i metodi è possibile passare un secondo argomento che indica la posizione di partenza all'interno della stringa. Ad esempio, la seguente istruzione individua la prima occorrenza del carattere "a" a partire dalla posizione 4 all'interno della stringa:

var x = "Una nuova stringa".indexOf("a", 4);

Il valore della variabile x sarà 8.

Un altro modo per individuare l'occorrenza di una sottostringa all'interno di una stringa è l'utilizzo del metodo match(). Esso rappresenta un approccio molto sofisticato che è in grado di sfruttare le espressioni regolari. Rimandiamo pertanto la sua analisi a quando affronteremo l'argomento.

Substr e Substring, estrarre una sottostringa

Anche per estrarre una sottostringa da una stringa possiamo sfruttare diversi approcci. Ad esempio, il metodo substr() ci consente di estrarre una sottostringa di un certo numero di caratteri a partire da una posizione:

var x = "Una nuova stringa".substr(4, 5);

La variabile x conterrà la sottostringa "nuova", cioè substr() ha estratto i 5 caratteri della sottostringa che inizia alla posizione 4. Il secondo argomento di substr(), quello relativo alla lunghezza della sottostringa da estrarre, è opzionale. Se viene omesso JavaScript estrarrà tutti i caratteri fino alla fine della stringa.

Il metodo substring(), invece, estrae una sottostringa compresa tra due posizioni. Per estrarre la sottostringa "nuova" possiamo procedere come nel seguente esempio:

var x = "Una nuova stringa".substring(4, 9);

Facciamo notare come il carattere corrispondente alla seconda posizione non viene incluso nella sottostringa risultante. Se il secondo argomento viene omesso JavaScript estrarrà tutti i caratteri fino alla fine della stringa.

Slice e Substring, le differenze

È possibile utilizzare anche il metodo slice(), molto simile a substring():

var x = "Una nuova stringa".slice(4, 9);

Anche slice() prevede due argomenti, di cui il secondo opzionale, che rappresentano le posizioni estreme della sottostringa da estrarre.

La differenza tra i due metodi è molto sottile, legata ad alcuni piccoli dettagli.

Se il primo parametro di substring() è maggiore del secondo parametro, JavaScript li scambia. Cioè, le seguenti istruzioni restituiscono il medesimo risultato:

var x = "Una nuova stringa".substring(4, 9);
var y = "Una nuova stringa".substring(9, 4);

Ciò non avviene per slice(). Infatti, se il primo argomento è maggiore del secondo viene restituita la stringa vuota.

Inoltre, se uno degli argomenti di substring() è negativo, esso viene trattato come zero, mentre per slice() un valore negativo indica una posizione relativa alla fine della stringa. Consideriamo il seguente esempio:

var x = "Una nuova stringa".substring(4, -2);
var y = "Una nuova stringa".slice(4, -2);

Nell'esecuzione della prima istruzione JavaScript scambia gli argomenti, dal momento che il primo è maggiore del secondo, considera il valore -2 come zero e quindi restituisce i primi quattro caratteri della stringa, cioè "Una ".

La seconda istruzione, invece, restituisce la sottostringa che inizia alla posizione 4 e termina 2 caratteri prima della fine della stringa, cioè "nuova strin".

Split, creare array dalle stringhe

Possiamo creare un array a partire da una stringa, grazie al metodo split(). Se invochiamo il metodo senza passare alcun parametro otteniamo un array di un solo elemento costituito dalla stringa stessa:

var x = "Una nuova stringa".split();
//x == ["Una nuova stringa"]

Se passiamo come argomento una stringa, essa verrà considerata come separatore ed otterremo un array i cui elementi sono le sottostringhe delimitate dal separatore:

var x = "Una nuova stringa".split("n");
//x == ["U", "a ", "uova stri", "ga"]

Per ottenere l'array dei caratteri di una stringa possiamo passare a split() la stringa vuota:

var x = "Una nuova stringa".split("");
//x == ["U", "n", "a", " ", "n", "u", "o", "v", "a", " ", "s", "t", "r", "i", "n", "g", "a"]

Il metodo split() prevede un secondo argomento che indica il numero di elementi che deve contenere l'array. Gli eventuali elementi in più verranno ignorati, come mostrato nel seguente esempio:

var x = "Una nuova stringa".split("", 5);
//x == ["U", "n", "a", " ", "n"]

Maiuscole e minuscole, toLowerCase e toUpperCase

Tra gli altri metodi più comunemente usati ricordiamo toLowerCase() e toUpperCase() per ottenere una versione della stringa rispettivamente in caratteri minuscoli o maiuscoli:

var x = "Una nuova stringa".toLowerCase();
var y = "Una nuova stringa".toUpperCase();
//x == "una nuova stringa"
//y == "UNA NUOVA STRINGA"

Il metodo trim(), introdotto nella versione 5 di ECMAScript, elimina gli spazi iniziali e finali di una stringa, mentre i metodi startsWith() e endsWith(), disponibili dalla versione 6 dello standard, verificano se una stringa inizia o finisce con la stringa specificata come argomento:

var x = " Una nuova stringa ".trim();
//x == "Una nuova stringa"
var y = "Una nuova stringa".startsWith("Una");  //true
var z = "Una nuova stringa".endsWith(".");	    //false

Creare stringhe di codice HTML

Tra i nuovi metodi dell'oggetto String già supportati da qualche engine JavaScript ed ufficializzati in ECMAScript 6 segnaliamo i cosiddetti HTML wrapper methods. Si tratta di metodi specializzati nella generazione di codice HTML, come mostrato nel seguente esempio:

var x = "Una nuova stringa".anchor("test");
var y = "Una nuova stringa".italics();
var z = "Una nuova stringa".bold();
//x == "<a name='test'>Una nuova stringa</a>"
//y == "<i>Una nuova stringa</i>"
//z == "<b>Una nuova stringa</b>"

Gli HTML wrapper methods hanno un uso limitato, dal momento che coprono un esiguo numero di elementi ed attributi HTML.