Stringhe e testi

Impara a lavorare con le stringhe, template literals e tutti i metodi di manipolazione testo.

🎮 Mettilo in pratica: nel corso JavaScript interattivo – progetti c'è la lezione Lezione 4 – Giocare con il testo.

Cosa Imparerai in Questa Lezione

Le stringhe (testi) sono uno dei tipi di dati più usati in programmazione. Imparerai a crearle, concatenarle, cercare all'interno, estrarre parti, modificarle e formattarle. JavaScript offre tantissimi metodi potenti per manipolare testi!

💡 Perché le Stringhe Sono Importanti?

Quasi tutto ciò che vedi in un'applicazione web è testo: messaggi, nomi utente, email, descrizioni prodotti. Saper manipolare stringhe significa poter validare form, formattare output, cercare dati e molto altro!

Creazione Stringhe

Esistono 3 modi per creare stringhe in JavaScript. Vediamoli tutti!

1. Apici Singoli (' ')

Il modo tradizionale, va benissimo per stringhe semplici.

Stringhe con Apici Singoli

let nome = 'Mario';
let città = 'Roma';
let messaggio = 'Benvenuto!';

console.log(nome);  // "Mario"

// Caratteri speciali con escape (\)
let testo = 'L\'acqua è fredda';  // Apice dentro la stringa
let percorso = 'C:\\Desktop';  // Backslash

2. Apici Doppi (" ")

Identici agli apici singoli, questione di preferenza personale.

Stringhe con Apici Doppi

let cognome = "Rossi";
let email = "mario@example.com";

// Utile per stringhe con apici singoli
let frase = "L'acqua è fredda";  // No escape necessario!

// Caratteri speciali
let citazione = "Disse: \"Ciao!\"";  // Doppi apici dentro

3. Template Literals (Backtick )

Il modo MODERNO (ES6). Supporta interpolazione e multi-riga! ⭐ CONSIGLIATO

Template Literals (ES6)

let nome = "Mario";
let età = 30;

// Interpolazione con ${...}
let presentazione = `Ciao, mi chiamo ${nome} e ho ${età} anni.`;
console.log(presentazione);
// "Ciao, mi chiamo Mario e ho 30 anni."

// Espressioni dentro ${...}
let messaggio = `L'anno prossimo avrai ${età + 1} anni`;
console.log(messaggio);  // "L'anno prossimo avrai 31 anni"

// Multi-riga (senza \n)
let messaggio2 = `Benvenuto!
Questo è JavaScript.
È fantastico!`;

console.log(messaggio2);

🎯 Confronto Metodi

💡 Best Practice Moderne

Usa template literals (backtick) per default. Sono più potenti, leggibili e ti evitano la concatenazione con +!

// ❌ VECCHIO MODO (concatenazione)
let messaggio = "Ciao " + nome + ", hai " + età + " anni.";

// ✅ NUOVO MODO (template literals)
let messaggio = `Ciao ${nome}, hai ${età} anni.`;

Caratteri Speciali (Escape Sequences)

// \n = nuova riga
console.log("Prima riga\nSeconda riga");

// \t = tab
console.log("Nome:\tMario");

// \\ = backslash
console.log("Percorso: C:\\Desktop");

// \' = apice singolo
console.log('L\'acqua');

// \" = apice doppio
console.log("Disse: \"Ciao!\"");

Proprietà e Accesso Caratteri

1. Lunghezza Stringa (.length)

Proprietà che restituisce il numero di caratteri.

Proprietà length

let testo = "JavaScript";

console.log(testo.length);  // 10

// Stringa vuota
let vuota = "";
console.log(vuota.length);  // 0

// Uso pratico: validazione
let password = "abc123";
if (password.length < 8) {
    alert("Password troppo corta!");
}

2. Accesso Caratteri

Puoi accedere a singoli caratteri per indice (come array).

Accesso con []

let parola = "JavaScript";

// Accesso con []
console.log(parola[0]);  // "J" (primo carattere, indice 0)
console.log(parola[4]);  // "S"
console.log(parola[9]);  // "t" (ultimo carattere)

// Carattere non esistente
console.log(parola[100]);  // undefined

⚠️ Le Stringhe Sono Immutabili!

Non puoi modificare singoli caratteri di una stringa. Devi creare una nuova stringa!

let parola = "casa";

// ❌ NON funziona (non modifica la stringa)
parola[0] = "m";
console.log(parola);  // "casa" (invariato)

// ✅ Devi creare una nuova stringa
parola = "m" + parola.slice(1);
console.log(parola);  // "masa"

Metodi di Ricerca

Esempi Metodi di Ricerca

let testo = "JavaScript è fantastico";

// indexOf - trova prima occorrenza
console.log(testo.indexOf("JavaScript"));  // 0 (inizio)
console.log(testo.indexOf("è"));           // 11
console.log(testo.indexOf("Python"));      // -1 (non trovato)

// includes - verifica presenza
console.log(testo.includes("JavaScript")); // true
console.log(testo.includes("Python"));     // false

// Case-sensitive!
console.log(testo.includes("javascript")); // false (minuscolo)

// startsWith - inizia con
console.log(testo.startsWith("JavaScript"));  // true
console.log(testo.startsWith("Java"));        // true

// endsWith - finisce con
console.log(testo.endsWith("fantastico"));    // true
console.log(testo.endsWith("o"));             // true

Metodi di Estrazione

1. slice(start, end)

Estrae una porzione di stringa. ⭐ CONSIGLIATO

Metodo slice()

let testo = "JavaScript";

// slice(inizio, fine) - fine esclusa
console.log(testo.slice(0, 4));   // "Java"
console.log(testo.slice(4, 10));  // "Script"
console.log(testo.slice(4));      // "Script" (fino alla fine)

// Indici negativi (contano dalla fine)
console.log(testo.slice(-6));     // "Script" (ultimi 6)
console.log(testo.slice(0, -2));  // "JavaScri" (escludi ultimi 2)

💡 Consiglio

Usa sempre slice() per estrarre parti di stringhe. È il metodo più potente e flessibile!

Metodi di Trasformazione

Maiuscole e Minuscole

let testo = "JavaScript";

// Tutto maiuscolo
console.log(testo.toUpperCase());  // "JAVASCRIPT"

// Tutto minuscolo
console.log(testo.toLowerCase());  // "javascript"

// Uso pratico: confronto case-insensitive
let input = "MARIO";
let nome = "mario";

console.log(input.toLowerCase() === nome.toLowerCase());  // true

Rimozione Spazi (trim)

let testo = "   Ciao Mondo!   ";

// Rimuove spazi da entrambi i lati
console.log(testo.trim());  // "Ciao Mondo!"

// Uso pratico: input utente
let userInput = "  mario@email.com  ";
let email = userInput.trim();  // "mario@email.com"

Sostituzione (replace)

let testo = "JavaScript è fantastico";

// replace - sostituisce PRIMA occorrenza
console.log(testo.replace("JavaScript", "JS"));
// "JS è fantastico"

// Sostituisci spazi con trattini
let titolo = "Come Imparare JavaScript";
let slug = titolo.replace(" ", "-");
console.log(slug);  // "Come-Imparare JavaScript" (solo primo spazio)

Ripetizione (repeat)

let simbolo = "=";

console.log(simbolo.repeat(10));  // "=========="

// Uso pratico: separatori
console.log("=".repeat(30));
console.log("TITOLO");
console.log("=".repeat(30));

Split e Join

1. split() - Stringa → Array

Divide una stringa in array di sottostringhe.

Metodo split()

// Dividi per virgola
let lista = "mela,banana,arancia";
let frutti = lista.split(",");
console.log(frutti);  // ["mela", "banana", "arancia"]

// Dividi per spazio
let frase = "JavaScript è fantastico";
let parole = frase.split(" ");
console.log(parole);  // ["JavaScript", "è", "fantastico"]

// Dividi ogni carattere
let parola = "Ciao";
let lettere = parola.split("");
console.log(lettere);  // ["C", "i", "a", "o"]

2. join() - Array → Stringa

Unisce elementi array in una stringa.

Metodo join()

let parole = ["JavaScript", "è", "fantastico"];

// join con spazio
console.log(parole.join(" "));   // "JavaScript è fantastico"

// join con virgola
console.log(parole.join(","));   // "JavaScript,è,fantastico"

// join con separatore custom
console.log(parole.join(" - ")); // "JavaScript - è - fantastico"

Esercizi Pratici Interattivi

Esercizio 1: Validatore Email Semplice

Obiettivo: Verifica se un'email è valida

Requisiti:

• Deve contenere @
• Deve finire con .com o .it
• Non deve avere spazi

let email = prompt("Inserisci la tua email:");

// Rimuovi spazi
email = email.trim();

// Controlla se contiene @
if (!email.includes("@")) {
    alert("❌ Email non valida: manca @");
} else if (email.includes(" ")) {
    alert("❌ Email non valida: contiene spazi");
} else if (!email.endsWith(".com") && !email.endsWith(".it")) {
    alert("❌ Email non valida: deve finire con .com o .it");
} else {
    alert("✅ Email valida: " + email);
}

Esercizio 2: Conta Caratteri e Parole

Obiettivo: Analizza un testo

Deve mostrare:

• Numero totale caratteri
• Numero di parole
• Prima parola
• Ultima parola

let testo = prompt("Inserisci un testo:");

// Caratteri totali
let totaleCaratteri = testo.length;

// Dividi in parole
let parole = testo.split(" ");
let numeroParole = parole.length;

// Prima e ultima parola
let primaParola = parole[0];
let ultimaParola = parole[parole.length - 1];

// Mostra risultato
let risultato = "=== ANALISI TESTO ===\n\n";
risultato += "Caratteri totali: " + totaleCaratteri + "\n";
risultato += "Numero parole: " + numeroParole + "\n";
risultato += "Prima parola: " + primaParola + "\n";
risultato += "Ultima parola: " + ultimaParola;

alert(risultato);

Esercizio 3: Formattatore Nome

Obiettivo: Formatta un nome correttamente

Deve:

• Rimuovere spazi extra
• Prima lettera maiuscola
• Resto minuscolo

Esempio: " mARio " → "Mario"

let nome = prompt("Inserisci il tuo nome:");

// 1. Rimuovi spazi ai lati
nome = nome.trim();

// 2. Converti tutto in minuscolo
nome = nome.toLowerCase();

// 3. Prima lettera maiuscola
let primaLettera = nome[0].toUpperCase();
let restoNome = nome.slice(1);
nome = primaLettera + restoNome;

// Mostra risultato
alert("Nome formattato: " + nome);

🎯 Riepilogo Lezione

Creazione:

• ' ' o " "
• template literals
• ${...} interpolazione
• .length proprietà

Ricerca:

• indexOf()
• includes()
• startsWith()
• endsWith()

Estrazione:

• slice() ⭐
• [indice]
• split()
• join()

Trasformazione:

• toUpperCase()
• toLowerCase()
• trim()
• replace()