Skip to content

6. Stringhe

Le stringhe JavaScript sono molto simili a quelle in PHP.

Image

6.1. script [str-01]

La prima cosa da capire è che, una volta creata, una stringa non può più essere modificata. Esistono molti metodi per creare una nuova stringa a partire da quella originale, ma la stringa originale rimane invariata. Inoltre, una stringa può essere di due tipi:

  • [string] quando viene inizializzata con un letterale stringa;
  • [object] quando viene creata come istanza della classe [String]; 

'use strict';
 
// strings are read-only (cannot be modified)
 
// a chain
const chaîne1 = "abcd ";
// type
console.log("typeof(chaîne1)=", typeof (chaîne1));
// character n° 2
console.log("chaîne1[2]=", chaîne1[2]);
// causes an error
chaîne1[2] = "0";

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Temp\19-09-01\javascript\strings\str-01.js"
typeof(chaîne1)= string
chaîne1[2]= c
c:\Temp\19-09-01\javascript\strings\str-01.js:1
TypeError: Cannot assign to read only property '2' of string 'abcd '
at Object.<anonymous> (c:\Temp\19-09-01\javascript\strings\str-01.js:12:12)
at Generator.next (<anonymous>)

6.2. script [str-02]

Questo script dimostra che una stringa può essere costruita in due modi.


'use strict';
 
// strings can be of two types
 
// a literal string
const chaîne1 = "abcd ";
// type
console.log("typeof(chaîne1)=", typeof (chaîne1));
// string instance
const chaîne2 = new String("xyzt");
// type
console.log("typeof(chaîne2)=", typeof (chaîne2));
// other entry (without new) - type [string] not [object]
const chaîne3 = String("12 34");
// type
console.log("typeof(chaîne3)=", typeof (chaîne3));
// type [string] and type [object] offer the same methods, those of the String class
console.log("chaîne1.length=", chaîne1.length);
console.log("chaîne2.length=", chaîne2.length);

Commenti

  • riga 6: il metodo standard per definire una stringa. [string1] sarà di tipo [string];
  • riga 10: una stringa può essere costruita utilizzando il costruttore della classe [String]. [string2] sarà di tipo [object];

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\strings\str-02.js"
typeof(chaîne1)= string
typeof(chaîne2)= object
typeof(chaîne3)= string
chaîne1.length= 5
chaîne2.length= 4

Il tipo [string] beneficia dei metodi della classe [String].

6.3. script [str-03]

Questo script visualizza una stringa specifica con interpolazione delle variabili.


'use strict';
 
// chain
const chaîne = "Introduction à Javascript par l'exemple";
// chain with variable interpolation
const str = `[${chaîne}].substr(3, 2)=` + chaîne.substr(3, 2)
console.log(str);

Commenti

  • riga 6: è possibile avere stringhe contenenti espressioni ${variabile} che vengono sostituite dal valore della variabile. Questo segue la stessa logica delle variabili $ nelle stringhe PHP. Si noti la sintassi di tale stringa: è racchiusa tra backtick (AltGr-7 su una tastiera francese);

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Temp\19-09-01\javascript\strings\tempCodeRunnerFile.js"
[Introduction à Javascript par l'exemple].substr(3, 2)=ro

6.4. script [str-04]

La stringa con interpolazione delle variabili è ancora insufficiente. Non è possibile sostituire una variabile con un'espressione nell'espressione ${variable}. Per chi ha programmato in C, non c'è niente di meglio delle funzioni [printf, sprintf] per scrivere o costruire stringhe formattate. Centinaia di sviluppatori hanno creato migliaia di pacchetti JavaScript, formando un vasto ecosistema. Quando si ha un'esigenza che non è soddisfatta in modo nativo da JavaScript, è il momento di cercare un pacchetto che la soddisfi. Per farlo, utilizziamo il gestore di pacchetti [npm]. Dispone di un'opzione [search] che consente di cercare una stringa all'interno delle descrizioni dei pacchetti. [npm] restituisce un elenco di pacchetti corrispondenti alla ricerca. Cercheremo quindi la stringa [sprintf] nelle descrizioni dei pacchetti:

Image

  • nella colonna [4], le parole chiave dei pacchetti nella colonna [3];
  • nella colonna [5], le descrizioni dei pacchetti nella colonna [3];

Il passo successivo è andare sul sito web di [npm], [https://www.npmjs.com/], e leggere le descrizioni dei pacchetti:

Image

In [3], esaminiamo l'elenco dei pacchetti e ne selezioniamo uno.

Image

Nella descrizione del pacchetto troverete le istruzioni per l'installazione e l'utilizzo:

Image

Installiamo il pacchetto [sprintf-js] in un terminale [VSCode]:

Image

Questa installazione modificherà il file [package.json] che si trova nella directory principale della cartella [javascript] [2]:

Image

Come mostrato sopra, il pacchetto è stato installato in [dependencies], ovvero i pacchetti necessari per l'esecuzione del progetto. Ricorda che i pacchetti necessari solo durante lo sviluppo del progetto vengono inseriti in [devDependencies]. Questi non vengono utilizzati in fase di esecuzione. Questa distinzione è importante quando si crea la versione finale del progetto per la distribuzione in produzione. Sono disponibili strumenti per:

  • unire tutti i file JavaScript necessari per l'esecuzione in un unico file. I pacchetti in [devDependencies] non vengono quindi inclusi in questo file finale;
  • minimizzarlo, ovvero ridurne le dimensioni il più possibile. Per farlo, ad esempio, vengono rimossi tutti i commenti;
  • "offuscare" il codice per renderlo di difficile comprensione. Ad esempio, le variabili rate, salary e tax saranno sostituite dalle variabili a, b e c;
  • eseguire altre ottimizzazioni;

Questa ottimizzazione del file finale di un progetto JavaScript viene utilizzata nella programmazione web. Un'applicazione web può dipendere da un gran numero di file JavaScript. Il caricamento di questi file in un browser può rallentare la visualizzazione della prima pagina dell'applicazione. L'ottimizzazione sopra descritta mira a migliorare questo tempo di caricamento. Se gli utenti trovano il tempo di caricamento troppo lungo, l'applicazione non verrà utilizzata.

Ora che abbiamo il pacchetto [sprintf-js], dobbiamo utilizzarlo. Questo è lo script [str-04]:


'use strict';
// use of an external package to provide the sprintf function
import { sprintf } from 'sprintf-js';
// chain
const chaîne = "Introduction à Javascript par l'exemple";
// method
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

Con ECMAScript 6, usiamo la parola chiave [import] per importare un oggetto esportato da un pacchetto. Per scoprire cosa esporta il pacchetto, puoi dare un'occhiata al suo codice:

Image

  • in [1], fare clic con il tasto destro del mouse sul pacchetto importato;
  • in [2], vogliamo vedere la sua definizione;
  • in [3-4], vediamo che il pacchetto esporta una funzione chiamata [sprintf];

La funzione [sprintf] del pacchetto [sprintf-js] viene importata utilizzando la seguente istruzione:


import { sprintf } from 'sprintf-js';

Il codice completo:


'use strict';
// use of an external package to provide the sprintf function
import { sprintf } from 'sprintf-js';
// chain
const chaîne = "Introduction à Javascript par l'exemple";
// method
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

produce i seguenti risultati:


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\strings\str-04.js"
c:\Temp\19-09-01\javascript\strings\str-04.js:3
import { sprintf } from 'sprintf-js';
^
 
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)

Riga 3: L'istruzione [import] non è riconosciuta. Questo perché la versione 10.15.1 di [node.js] utilizzata in questo corso (settembre 2019) non supporta ancora lo standard ECMAScript per l'importazione di pacchetti chiamati moduli. Nel 2019, [node.js] supporta uno standard di moduli chiamato CommonJS. L'integrazione dei moduli ECMAScript da parte di [node.js] è prevista per il 2020. Ancora una volta, gli sviluppatori si sono attivati e hanno creato pacchetti che consentono l'uso dei moduli ES6 con [node.js] già da ora (2019).

Useremo un pacchetto chiamato [esm] (ECMAScript Modules). Lo installiamo in un terminale per il progetto [javascript]:

Image

In [4], possiamo vedere che l'installazione del pacchetto [esm] [1-3] ha modificato il file [javascript/package.json].

Non abbiamo ancora finito. Affinché il modulo [esm] possa essere utilizzato da [node.js], dobbiamo eseguirlo con l'argomento [-r esm].

Quindi modifichiamo la configurazione dell'estensione [Code Runner] in [VSCode]:

Image

Image

In [11], aggiungiamo l'argomento [-r esm] e salviamo (Ctrl-S) la configurazione.

Ora possiamo eseguire lo script [str-04]:


'use strict';
// use of an external package to provide the sprintf function
import { sprintf } from 'sprintf-js';
// chain
const chaîne = "Introduction à Javascript par l'exemple";
// substr method
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

Image

6.5. script [str-05]

Ecco cosa dice la documentazione riguardo alla funzione [sprintf]:

I segnaposto nella stringa di formato sono contrassegnati da % e sono seguiti da uno o più di questi elementi, in questo ordine:

  • Un numero facoltativo seguito dal segno $ che seleziona quale indice dell'argomento utilizzare per il valore. Se non specificato, gli argomenti saranno posizionati nello stesso ordine dei segnaposto nella stringa di input.
  • Un segno + opzionale che impone che il risultato sia preceduto da un segno più o meno per i valori numerici. Per impostazione predefinita, per i numeri negativi viene utilizzato solo il segno -.
  • Un specificatore di riempimento opzionale che specifica quale carattere utilizzare per il riempimento (se specificato). I valori possibili sono 0 o qualsiasi altro carattere preceduto da un ' (apice singolo). L'impostazione predefinita è il riempimento con spazi.
  • Un segno - opzionale che fa sì che sprintf allinei a sinistra il risultato di questo segnaposto. L'impostazione predefinita è l'allineamento a destra del risultato.
  • Un numero opzionale che specifica il numero di caratteri che il risultato deve contenere. Se il valore da restituire è più breve di questo numero, il risultato verrà riempito. Quando utilizzato con lo specificatore di tipo j (JSON), la lunghezza di riempimento specifica la dimensione della tabulazione utilizzata per l'indentazione.
  • Un modificatore di precisione opzionale, costituito da un . (punto) seguito da un numero, che specifica quante cifre devono essere visualizzate per i numeri in virgola mobile. Se utilizzato con il specificatore di tipo g, specifica il numero di cifre significative. Se utilizzato su una stringa, provoca il troncamento del risultato.
  • Un specificatore di tipo che può essere uno qualsiasi dei seguenti:
    • % — produce un carattere % letterale
    • b — restituisce un numero intero in formato binario
    • c — restituisce un numero intero come carattere con quel valore ASCII
    • d o i — restituisce un numero intero come numero decimale con segno
    • e — restituisce un numero in virgola mobile in notazione scientifica
    • u — restituisce un numero intero come numero decimale senza segno
    • f — restituisce un numero in virgola mobile così com'è; vedere le note sulla precisione sopra
    • g — restituisce un numero in virgola mobile così com'è; vedere le note sulla precisione sopra
    • o — restituisce un numero intero come numero ottale
    • s — restituisce una stringa così com'è
    • t — restituisce vero o falso
    • T — restituisce il tipo dell'argomento1
    • v — restituisce il valore primitivo dell'argomento specificato
    • x — restituisce un numero intero come numero esadecimale (minuscolo)
    • X — restituisce un numero intero come numero esadecimale (maiuscolo)
    • j — restituisce un oggetto o un array JavaScript come stringa codificata in JSON

Lo script [script-05] implementa alcuni di questi formati:


'use strict';
// use of an external package to provide the sprintf function
import { sprintf } from 'sprintf-js';
// chain
const chaîne = "Javascript";
// character strings
console.log(sprintf("[%s, %%s]=>[%s]", chaîne, chaîne));
console.log(sprintf("[%s, %%20s]=>[%20s]", chaîne, chaîne));
console.log(sprintf("[%s, %%-20s]=>[%-20s]", chaîne, chaîne));
// integers
console.log(sprintf("[%d, %%d]=>[%d]", 10, 10));
console.log(sprintf("[%d, %%4d]=>[%4d]", 10, 10));
console.log(sprintf("[%d, %%-4d]=>[%-4d]", 10, 10));
console.log(sprintf("[%d, %%04d]=>[%04d]", 10, 10));
// real
console.log(sprintf("[%f, %%f]=>[%f]", -10.5, -10.5));
console.log(sprintf("[%f, %%10.2f]=>[%10.2f]", -10.5, -10.5));
console.log(sprintf("[%f, %%-10.2f]=>[%-10.2f]", -10.5, -10.5));
console.log(sprintf("[%f, %%010.3f]=>[%010.3f]", -10.5, -10.5));
// json
console.log(sprintf("personne (%%j)=%j", { nom: "mathieu", âge: 34 }));
// type
console.log(sprintf("type personne (%%T)=%T", { nom: "mathieu", âge: 34 }));
// boolean
console.log(sprintf("booléen (%%t)=%t", 4 === 4));

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\strings\str-05.js"
[Javascript, %s]=>[Javascript]
[Javascript, %20s]=>[ Javascript]
[Javascript, %-20s]=>[Javascript ]
[10, %d]=>[10]
[10, %4d]=>[ 10]
[10, %-4d]=>[10 ]
[10, %04d]=>[0010]
[-10.5, %f]=>[-10.5]
[-10.5, %10.2f]=>[ -10.50]
[-10.5, %-10.2f]=>[-10.50 ]
[-10.5, %010.3f]=>[-00010.500]
personne (%j)={"nom":"mathieu","âge":34}
type personne (%T)=object
booléen (%t)=true

6.6. script [str-06]

Lo script [str-06] illustra alcuni metodi della classe [String] che possono essere utilizzati anche sul tipo [string]:


'use strict';
// use of an external package to provide the sprintf function
import { sprintf } from 'sprintf-js';
// chain
const chaîne = "  Introduction à Javascript ";
// a few methods
// substr(10,2): 2 characters starting from number 10
console.log(sprintf("[%s].substr(10,2)=[%s]", chaîne, chaîne.substr(10, 2)));
// trim: eliminates blanks at the beginning and end of a chain (blank=b \t \r \n \f)
console.log(sprintf("[%s].trim()=[%s]", chaîne, chaîne.trim()));
// toLowerCase: transformation to lower case
console.log(sprintf("[%s].toLowerCase=[%s]", chaîne, chaîne.toLowerCase()));
// toUpperCase: transformation into uppercase letters
console.log(sprintf("[%s].toUpperCase=[%s]", chaîne, chaîne.toUpperCase()));
// indexOf: position of a searched  string within the string, -1 if the substring doesn't exist
console.log(sprintf("[%s].indexOf('Java')=[%s]", chaîne, chaîne.indexOf('Java')));
console.log(sprintf("[%s].trim().indexOf('abcd')=[%s]", chaîne, chaîne.indexOf('abcd')));
// includes: true if the string searched for is in the string
console.log(sprintf("[%s].includes('Java')=[%s]", chaîne, chaîne.includes('Java')));
// length: string length - not a method but a property
console.log(sprintf("[%s].length=[%s]", chaîne, chaîne.length));
// slice (7,10): strings of characters 7 to 9
console.log(sprintf("[%s].slice(7,10)=[%s]", chaîne, chaîne.slice(7, 10)));
// match: searches for an expression in the string - this expression can be a regular expression
// /intro/i: regular expression designating the string [intro] in upper or lower case
// returns the string found
console.log(sprintf("[%s].match(/intro/i)=[%s]", chaîne, chaîne.match(/intro/i)));
// replace: replaces string1 with string2 in string
// replaces the 1st occurrence of i with x
console.log(sprintf("[%s].replace('i','x')=[%s]", chaîne, chaîne.replace('i', 'x')));
// replaces all occurrences of i with x
// /i/g is a regular expression designating all (g) occurrences of i
console.log(sprintf("[%s].replace(/i/g,'x')=[%s]", chaîne, chaîne.replace(/i/g, 'x')));
// split: splits the string into words separated by the split parameter
// renders the table of these words
// /\s*/ : words separated by 0 or more spaces
console.log(sprintf("[%s].split(/\\s*/)=[%s]", chaîne, chaîne.split(/\s*/)));
// /\s+/ : words separated by one or more spaces
console.log(sprintf("[%s].split(/\\s+/)=[%s]", chaîne, chaîne.split(/\s+/)));

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\strings\str-06.js"
[ Introduction à Javascript ].substr(10,2)=[ti]
[ Introduction à Javascript ].trim()=[Introduction à Javascript]
[ Introduction à Javascript ].toLowerCase=[ introduction à javascript ]
[ Introduction à Javascript ].toUpperCase=[ INTRODUCTION À JAVASCRIPT ]
[ Introduction à Javascript ].indexOf('Java')=[17]
[ Introduction à Javascript ].trim().indexOf('abcd')=[-1]
[ Introduction à Javascript ].includes('Java')=[true]
[ Introduction à Javascript ].length=[28]
[ Introduction à Javascript ].slice(7,10)=[duc]
[ Introduction à Javascript ].match(/intro/i)=[Intro]
[ Introduction à Javascript ].replace('i','x')=[ Introductxon à Javascript ]
[ Introduction à Javascript ].replace(/i/g,'x')=[ Introductxon à Javascrxpt ]
[ Introduction à Javascript ].split(/\s*/)=[,I,n,t,r,o,d,u,c,t,i,o,n,à,J,a,v,a,s,c,r,i,p,t,]
[ Introduction à Javascript ].split(/\s+/)=[,Introduction,à,Javascript,]
https://stahe.github.io
Questo tutorial scritto da Serge Tahé è reso disponibile al pubblico secondo i termini della Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 3.0 Unported.