Lezione 4 – JavaScript

Stringhe e Manipolazione Testi

Impara a lavorare con le stringhe, template literals e tutti i metodi di manipolazione 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!

🎯 Prova Subito le Stringhe!

Clicca sui pulsanti per vedere le stringhe in azione!

📝 Creazione Stringhe

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

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

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

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

Metodo	Sintassi	Interpolazione	Multi-riga	Quando Usare
Apici singoli	`'testo'`	❌ No	❌ No	Stringhe semplici
Apici doppi	`"testo"`	❌ No	❌ No	Stringhe semplici
Template literals	`testo`	✅ Sì	✅ Sì	⭐ Stringhe dinamiche

💡 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.`;

🎮 Prova Template Literals Interattivi

Crea una presentazione personalizzata con i tuoi dati!

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

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!");
}

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

🔍 Prova Accesso Caratteri

⚠️ 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

Metodo	Descrizione	Ritorna	Esempio
`indexOf()`	Trova posizione sottostringa	Indice o -1	`"hello".indexOf("l")` → 2
`lastIndexOf()`	Trova ultima occorrenza	Indice o -1	`"hello".lastIndexOf("l")` → 3
`includes()`	Verifica presenza	true/false	`"hello".includes("ell")` → true
`startsWith()`	Inizia con?	true/false	`"hello".startsWith("he")` → true
`endsWith()`	Finisce con?	true/false	`"hello".endsWith("lo")` → true

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

🔎 Ricerca Interattiva

Cerca una parola all'interno di un testo!

✂️ Metodi di Estrazione

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)

✂️ Prova slice() Interattivo

💡 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));

🔄 Trasforma Testo Interattivo

Prova tutte le trasformazioni su un testo a tua scelta!

🔗 Split e Join

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"]

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"

🔗 Split e Join Interattivo

Dividi un testo e uniscilo in modi diversi!

💪 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

📝 Esercizio 2: Conta Caratteri e Parole

Obiettivo: Analizza un testo

Deve mostrare:

Numero totale caratteri
Numero di parole
Prima parola
Ultima parola

📝 Esercizio 3: Formattatore Nome

Obiettivo: Formatta un nome correttamente

Deve:

Rimuovere spazi extra
Prima lettera maiuscola
Resto minuscolo

Esempio: " mARio " → "Mario"

🎯 Riepilogo Lezione

Creazione:

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

Ricerca:

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

Estrazione:

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

Trasformazione:

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

← Lezione 3: Operatori

📚 Corso Completo

Strutture condizionali →

Lezione 4 del Corso JavaScript Completo

📚 Tutte le Lezioni

🏠 Home