JavaScript e manipolazione delle stringhe: estrarre parti di un testo con slice, split e substring

by Anastasia P.
Add as preferred source on Google
SHARE
JavaScript e manipolazione delle stringhe: estrarre parti di un testo con slice, split e substring
© Guida-HTML5.it

Introduzione

La manipolazione delle stringhe è una delle abilità più utili in JavaScript, soprattutto quando devi lavorare con dati testuali reali: percorsi di file, identificativi, codici prodotto, nomi completi, URL, log, messaggi utente o contenuti importati da API. In molti casi non basta “leggere” una stringa: bisogna estrarre una parte precisa del testo, separare campi, oppure ricavare informazioni da un formato che non controlli completamente.

In questo tutorial vediamo un sotto-argomento molto pratico: estrarre porzioni di stringhe in modo robusto usando slice(), substring() e split(). È un tema semplice solo in apparenza: scegliere il metodo giusto evita bug difficili da scoprire, soprattutto quando il testo può cambiare lunghezza o contenuto.

Faremo un esempio concreto: costruire un piccolo parser per leggere un codice ordine nel formato ORD-2026-IT-0042 e ottenere le sue parti principali. Questo tipo di manipolazione è tipica in dashboard, sistemi di back-office e applicazioni di e-commerce.

Codice completo

// Esempio: parsing di un codice ordine nel formato
// ORD-2026-IT-0042
// Obiettivo:
// - tipo: ORD
// - anno: 2026
// - paese: IT
// - progressivo: 42

function parseOrderCode(code) {
  if (typeof code !== "string") {
    throw new TypeError("Il codice ordine deve essere una stringa.");
  }

  // Separiamo il testo usando il trattino come delimitatore
  const parts = code.split("-");

  // Controllo di base sul formato
  if (parts.length !== 4) {
    throw new Error("Formato non valido. Atteso: ORD-YYYY-CC-NNNN");
  }

  const [type, year, country, progressive] = parts;

  // Validazioni minime
  if (type !== "ORD") {
    throw new Error("Tipo non valido: atteso ORD.");
  }

  if (!/^d{4}$/.test(year)) {
    throw new Error("Anno non valido: attese 4 cifre.");
  }

  if (!/^[A-Z]{2}$/.test(country)) {
    throw new Error("Paese non valido: attese 2 lettere maiuscole.");
  }

  if (!/^d{4}$/.test(progressive)) {
    throw new Error("Progressivo non valido: attese 4 cifre.");
  }

  return {
    type,
    year: Number(year),
    country,
    progressive: Number(progressive)
  };
}

// Esempio di utilizzo
const input = "ORD-2026-IT-0042";

try {
  const parsed = parseOrderCode(input);
  console.log("Codice valido:", parsed);
} catch (error) {
  console.error("Errore:", error.message);
}

// ------------------------------------------------------
// Altri esempi utili di estrazione con slice e substring
// ------------------------------------------------------

// 1) Estrarre l´estensione di un file
function getFileExtension(filename) {
  if (typeof filename !== "string") return "";

  const lastDotIndex = filename.lastIndexOf(".");
  if (lastDotIndex === -1) return "";

  // slice prende dall´indice indicato fino alla fine
  return filename.slice(lastDotIndex + 1);
}

console.log(getFileExtension("report.final.pdf")); // pdf

// 2) Estrarre il nome senza estensione
function getBaseName(filename) {
  if (typeof filename !== "string") return "";

  const lastDotIndex = filename.lastIndexOf(".");
  if (lastDotIndex === -1) return filename;

  return filename.slice(0, lastDotIndex);
}

console.log(getBaseName("report.final.pdf")); // report.final

// 3) Estrarre una sottostringa da un codice con slice
function getPrefix(code) {
  if (typeof code !== "string") return "";

  // Prendiamo i primi 3 caratteri
  return code.slice(0, 3);
}

console.log(getPrefix("ORD-2026-IT-0042")); // ORD

// 4) substring: simile a slice, ma non accetta indici negativi
function getMiddleSection(code) {
  if (typeof code !== "string") return "";

  // Estrae i caratteri dall´indice 4 al 8 escluso
  return code.substring(4, 8);
}

console.log(getMiddleSection("ORD-2026-IT-0042")); // 2026

Spiegazione

Nel codice abbiamo usato tre tecniche diverse, ognuna con un ruolo preciso.

split(): separare una stringa in parti

split() divide una stringa in un array usando un separatore. Nel nostro esempio:

const parts = code.split("-");

La stringa ORD-2026-IT-0042 diventa:

["ORD", "2026", "IT", "0042"]

Questo approccio è ideale quando il formato è strutturato e i campi sono separati da un carattere fisso, come trattini, virgole o spazi.

slice(): estrarre una porzione con precisione

slice(inizio, fine) restituisce una sottostringa dal carattere iniziale fino a quello finale escluso. È molto utile perché:

  • accetta indici negativi;
  • non modifica la stringa originale;
  • è chiaro quando vuoi prendere “da qui a lì”.

Per esempio, per ottenere l’estensione di un file:

const lastDotIndex = filename.lastIndexOf(".");
return filename.slice(lastDotIndex + 1);

Se il file è report.final.pdf, il risultato è pdf.

substring(): simile a slice, ma con comportamento diverso

substring(inizio, fine) è simile a slice(), ma non gestisce gli indici negativi e, se inizio è maggiore di fine, li scambia automaticamente. In pratica è utile quando lavori sempre con indici non negativi e vuoi una semantica semplice.

Nel tutorial lo abbiamo usato per estrarre una parte centrale del codice. Tuttavia, nella pratica moderna, slice() è spesso preferito perché è più flessibile e coerente con altri metodi di JavaScript.

Validazione prima dell’estrazione

Un errore comune è estrarre dati senza controllare il formato. Per esempio, se fai subito:

const [type, year, country, progressive] = code.split("-");

e la stringa non contiene esattamente quattro parti, rischi di ottenere valori undefined o risultati incoerenti. Per questo il parser verifica:

  • che l’input sia una stringa;
  • che il numero di parti sia corretto;
  • che ogni campo rispetti un formato minimo.

Questa è una buona abitudine in qualsiasi applicazione reale.

Best practice

  • Valida sempre l’input prima di estrarre sottostringhe. Una stringa “quasi giusta” può produrre bug silenziosi.
  • Usa split() per dati delimitati e slice() per estrazioni basate su posizione.
  • Preferisci slice() a substring() quando ti servono indici negativi o un comportamento più prevedibile.
  • Evita numeri magici: se gli indici sono importanti, assegna nomi descrittivi alle costanti.
  • Trasforma i dati estratti nel tipo corretto: per esempio Number(year) o Number(progressive).
  • Gestisci gli errori in modo esplicito con throw e try/catch, soprattutto in funzioni di parsing.

Un’altra buona pratica è scrivere funzioni piccole e specializzate. Ad esempio, getFileExtension() e getBaseName() sono più facili da testare e riusare rispetto a una funzione gigantesca che fa tutto insieme.

Riepilogo

La manipolazione delle stringhe in JavaScript non riguarda solo la formattazione del testo: spesso serve a estrarre informazioni da dati strutturati o semi-strutturati. In questo tutorial abbiamo visto come:

  • separare una stringa in parti con split();
  • estrarre segmenti con slice();
  • usare substring() nei casi appropriati;
  • validare il formato prima di lavorare sui dati;
  • convertire le sottostringhe nei tipi giusti.

Se impari a combinare questi strumenti, potrai gestire con sicurezza codici prodotto, nomi file, identificativi, log e molti altri testi reali che incontrerai nello sviluppo web.

Approfondisci con risorse ufficiali

  • MDN Web Docs - String.prototype.slice(): documentazione completa su sintassi e casi d’uso.
  • MDN Web Docs - String.prototype.substring(): differenze rispetto a slice() e comportamento degli indici.
  • MDN Web Docs - String.prototype.split(): guida dettagliata alla separazione delle stringhe.
  • MDN Web Docs - RegExp: utile per aggiungere validazioni più precise ai dati estratti.
  • JavaScript.info: ottima risorsa per approfondire le stringhe con esempi pratici.

Add as preferred source on Google
SHARE