Metodi delle stringhe JavaScript spiegati: substr vs substring vs slice (Migliori pratiche e utilizzo moderno)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduzione

JavaScript è un linguaggio di programmazione essenziale nello sviluppo web. In particolare, la manipolazione delle stringhe è frequentemente utilizzata per formattare dati, analisi e aggiornare dinamicamente l’interfaccia utente.
In questo articolo spiegheremo in dettaglio tre metodi JavaScript per le stringhe comunemente usati—substr, substring e slice. Poiché questi metodi forniscono funzionalità simili, comprenderne le differenze ti aiuterà a scegliere quello più adatto a ciascuna situazione.
Discuteremo anche perché substr è stato deprecato e forniremo approcci alternativi, offrendo consigli pratici per scrivere JavaScript secondo le migliori pratiche moderne.

2. Informazioni di Base e Uso di Ogni Metodo

Questa sezione spiega la sintassi di base e l’uso di substr, substring e slice. Comprendere questi metodi ti aiuterà a scegliere quello appropriato e a migliorare la leggibilità e la manutenibilità del codice.

2.1 Metodo substr

Sintassi:

string.substr(start, length)

Descrizione:

• start : Specifica l’indice di partenza per l’estrazione (basato su 0).
• length : Specifica il numero di caratteri da estrarre. Se omesso, l’estrazione continua fino alla fine della stringa.

Esempio d’uso:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

Nota:
Il metodo substr è deprecato, ed è consigliato evitarlo nel codice futuro. Usa slice o substring al suo posto.

Esempio Alternativo (usando slice):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 Metodo substring

Sintassi:

string.substring(start, end)

Descrizione:

• start : Indice di inizio dell’estrazione.
• end : Indice di fine (il carattere a questo indice non è incluso).

Esempio d’uso:

let str = "JavaScript";
console.log(str.substring(0, 4)); // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

Punti:

1. L’ordine degli argomenti viene corretto automaticamente: Se chiami substring(10, 4), verrà trattato come substring(4, 10).
2. I valori negativi sono ignorati: Qualsiasi argomento negativo viene trattato come 0.

Esempio alternativo quando sono necessari valori negativi (usando slice):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 Metodo slice

Sintassi:

string.slice(start, end)

Descrizione:

• start : Indice di inizio dell’estrazione.
• end : Indice di fine (il carattere a questo indice non è incluso).

Esempio d’uso:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

Punti:

1. Supporta valori negativi: Gli indici negativi contano dalla fine della stringa.
2. Funziona sia per stringhe che per array: Può anche estrarre elementi da array, rendendolo molto versatile.

3. Tabella Comparativa di Ogni Metodo

Scegliere il Metodo Giusto in Base al Caso d’Uso:

• Estrazione di segmenti brevi: → slice
• Quando sono necessari valori negativi: → slice
• Compatibilità con codice legacy: → Evita substr; migra se necessario

4. Esempi di Codice Pratici

Manipolazione di Stringhe di Base

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

Estrazione di Valori Basata su un Pattern

let url = "https://example.com/index.html";

// Get the file name
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. Come Gestire i Metodi Deprecati

Il metodo substr di JavaScript è deprecato. Questo perché substr è stato classificato come metodo non consigliato nelle ultime specifiche ECMAScript.
Questa sezione spiega i problemi legati a substr, i metodi alternativi e come migrare il tuo codice.

5.1 Perché substr è deprecato?

1. Scarsa leggibilità:

• substr utilizza il secondo argomento come “numero di caratteri da estrarre,”
  che differisce da altri metodi che usano un indice finale.
  Questa incoerenza rende il codice più difficile da comprendere.

1. Potenziali problemi di compatibilità futura a causa di cambiamenti nelle specifiche:

• Le funzionalità più vecchie vengono deprecate durante la standardizzazione di ECMAScript.
  Il nuovo codice non dovrebbe dipendere da esse.

1. Nessun supporto per valori negativi:

• substr non supporta indici negativi, mentre slice lo fa.

5.2 Come migrare verso metodi moderni

Caso 1: Estrarre una sottostringa di lunghezza fissa

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // "Java"

// Recommended (slice)
console.log(str.slice(0, 4)); // "Java"

Caso 2: Estrarre la fine di una stringa

// Deprecated code
console.log(str.substr(-6)); // Error (negative not supported)

// Recommended (slice)
console.log(str.slice(-6)); // "Script"

Caso 3: Estrarre una parte di un URL o di un nome file

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // "index.html"

// Recommended (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // "index.html"

5.3 Punti di refactoring per codice legacy

1. Eseguire una scansione del codice:

• Usa strumenti come ESLint per rilevare dove viene usato substr.

1. Rafforzare la copertura dei test:

• Usa test unitari per garantire che il comportamento rimanga corretto dopo la sostituzione dei metodi.

1. Migrare gradualmente:

• Prioritizza la sostituzione nelle sezioni importanti o frequentemente eseguite.

5.4 Vantaggi della migrazione da substr

1. Migliorata leggibilità e manutenibilità:

• L’intento del codice diventa più chiaro, migliorando la comprensione del team.

1. Compatibilità con gli standard moderni:

• Seguire gli standard ECMAScript garantisce stabilità a lungo termine.

1. Supporto flessibile per valori negativi:

• slice consente un’estrazione concisa sia dalle posizioni iniziali che finali.

6. Domande frequenti (FAQ)

Questa sezione riassume le domande comuni e le risposte sui metodi di manipolazione delle stringhe in JavaScript.

Q1: Posso ancora usare substr?

A:
Sì, la maggior parte dei browser moderni supporta ancora substr.
Tuttavia, poiché ECMAScript lo segna come deprecato, dovrebbe essere evitato nei nuovi progetti o nei codebase che richiedono compatibilità futura.
Alternativa consigliata:

let str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

Q2: Qual è la differenza tra slice e substring?

A:
La tabella seguente riassume le loro differenze:

Esempi:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: Quali sono i rischi di continuare a usare metodi deprecati?

A:

1. Possibile rimozione del supporto nei browser: substr potrebbe eventualmente non essere più supportato.
2. Aumento dei costi di manutenzione: Il debug di funzionalità deprecate richiede tempo aggiuntivo.
3. Qualità del codice inferiore: Non seguire gli standard moderni riduce la leggibilità.

Q4: Qual è il metodo migliore per stringhe lunghe?

A: slice è il migliore perché supporta indici negativi e offre grande flessibilità.
Esempio:

let longText = "This is a very long text string used for testing purposes.";

// First 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Come posso contare all’indietro usando valori negativi?

A: Usa slice, poiché substring tratta i valori negativi come 0.
Esempio:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

// substring treats negative as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: Ci sono differenze di prestazioni?

R: I browser moderni non mostrano differenze di prestazioni significative tra slice, substring o substr.
Poiché tutte sono funzioni native, dai priorità alla leggibilità e alla manutenibilità rispetto a micro‑ottimizzazioni.

7. Riepilogo e Best Practice Consigliate

In questo articolo abbiamo esplorato i metodi JavaScript per le stringhe substr, substring e slice, coprendo la loro sintassi di base, le differenze, esempi pratici di codice e le strategie di migrazione per i metodi deprecati.
Questa sezione riorganizza le caratteristiche chiave di ciascun metodo e presenta le best practice moderne consigliate.

7.1 Riepilogo di ciascun metodo

7.2 Criteri pratici di selezione

1. Usa substring per estrazioni di intervalli semplici:

• Ideale quando non sono necessari valori negativi. Esempio:

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. Usa slice per la massima flessibilità:

• Supporta indici negativi ed è il metodo consigliato per nuovo codice. Esempio:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. Sostituisci substr il prima possibile:

• Migra a slice o substring quando mantieni codice legacy.

7.3 Best practice moderne

1. Scrivi codice con la leggibilità in mente:

• Un codice chiaro e conciso migliora la manutenibilità a lungo termine.

2. Evita i metodi deprecati:

• substr potrebbe perdere il supporto nei browser futuri—migra in anticipo.

3. Usa slice quando lavori con valori negativi:

• slice è l’unico metodo che gestisce correttamente gli indici negativi.

4. Utilizza ESLint e suite di test per mantenere la qualità del codice:

• L’analisi statica aiuta a rilevare metodi deprecati e a imporre stili di codifica moderni.

7.4 Esempio di uno stile di codifica moderno

// Example: Extract domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Get file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 Piano d’azione per i lettori

1. Rivedi il tuo codice esistente:

• Verifica se substr è usato nel tuo progetto e sostituiscilo dove necessario.

2. Segui le best practice nel nuovo codice:

• Usa pattern moderni e flessibili ed evita le funzionalità deprecate.

3. Sfrutta commenti e domande della community:

• Condividi domande o casi d’uso per aiutare gli altri a imparare, rafforzando al contempo la tua comprensione.

Conclusione

Questo articolo ha fornito una spiegazione approfondita dei metodi JavaScript substr, substring e slice, includendo sintassi, esempi, tabelle comparative e strategie di migrazione.

• Evita substr perché è deprecato.
• Usa substring per scenari semplici.
• Usa slice per la massima flessibilità e le best practice moderne.

Utilizza queste indicazioni per scrivere codice JavaScript efficiente e manutenibile.

8. Link correlati e riferimenti

Per approfondire la tua comprensione di substr, substring e slice, ecco alcuni link e riferimenti utili. Documentazione ufficiale e risorse di apprendimento ti aiuteranno a rimanere aggiornato sulle ultime novità e tecniche JavaScript.

8.1 Documentazione ufficiale

1. MDN Web Docs – JavaScript String Object

• Link: String – MDN Web Docs
• Panoramica: Una referenza completa per l’oggetto String di JavaScript con specifiche dettagliate ed esempi.

1. Specifiche ECMAScript (ECMA‑262)

• Link: Specificazione ufficiale ECMAScript
• Panoramica: La specifica ufficiale del linguaggio che copre le ultime funzionalità ECMAScript, i metodi deprecati e i dettagli tecnici.

8.2 Siti di apprendimento e tutorial

1. JavaScript.info – Guida alla manipolazione delle stringhe

• Link: JavaScript.info
• Panoramica: Una guida completa che copre sia le operazioni di stringa di base che quelle avanzate, con esempi pratici.

1. Progate – Corso JavaScript da principiante a intermedio

• Link: Progate
• Panoramica: Una piattaforma interattiva ideale per i principianti che apprendono attraverso esercizi di codifica pratici.

1. DotInstall – Lezioni introduttive di JavaScript

• Link: DotInstall
• Panoramica: Brevi lezioni video che rendono facile apprendere JavaScript in modo visivo e rapido.

8.3 Risorse pratiche di codice di esempio

1. GitHub – Progetti di esempio JavaScript

• Link: GitHub
• Panoramica: Impara le migliori pratiche e i pattern del mondo reale esplorando progetti open source.

1. CodePen – Condivisione interattiva di codice

• Link: CodePen
• Panoramica: Condividi e testa il tuo codice con altri sviluppatori o sfoglia esempi per ispirazione.

8.4 Libri consigliati

1. JavaScript: La Guida Definitiva (7ª Edizione)

• Panoramica: Un riferimento completo e autorevole che copre JavaScript dalle basi alle funzionalità avanzate.

1. Mastering Modern JavaScript – Edizione Revisionata

• Panoramica: Un riferimento pratico incentrato su JavaScript moderno e sugli standard di codifica aggiornati.

8.5 Comunità e forum

1. Stack Overflow (giapponese)

• Link: Stack Overflow
• Panoramica: Una community di domande e risposte dove puoi risolvere problemi JavaScript in modo efficiente.

1. Qiita

• Link: Qiita
• Panoramica: Una piattaforma giapponese ricca di articoli pratici e case study su JavaScript.

1. Teratail

• Link: Teratail
• Panoramica: Un sito Q&A giapponese ideale per porre domande tecniche nella lingua madre.

Conclusione

Questa sezione ha introdotto una vasta gamma di risorse—dalle referenze ufficiali ai tutorial, ai repository di codice di esempio e alle piattaforme comunitarie—per supportare l’apprendimento continuo delle operazioni sulle stringhe in JavaScript.
Punti chiave:

1. Controlla regolarmente la documentazione ufficiale:

• Assicurati che il tuo stile di codifica rimanga allineato agli ultimi standard.

1. Rafforza le competenze attraverso la programmazione pratica:

• La pratica rende i concetti più chiari e migliora l’applicazione nel mondo reale.

1. Interagisci con la community:

• Condividere domande e soluzioni aiuta ad approfondire la comprensione e ad ampliare la tua rete.