Escape dei Caratteri Speciali in JavaScript

Introduzione

In JavaScript, eseguire l'escape dei caratteri speciali è una competenza fondamentale per gli sviluppatori, che consente di creare string contenenti caratteri che altrimenti verrebbero interpretati diversamente dal processore del linguaggio. Questo articolo approfondisce i metodi e l'importanza dell'escape dei caratteri speciali, fornendo agli sviluppatori le conoscenze e gli strumenti per gestire string complesse in modo efficace.

Comprendere i Caratteri Speciali

Un carattere speciale è qualsiasi carattere che il parser di JavaScript interpreterebbe come parte della sintassi anziché come testo letterale. I più importanti rientrano in due gruppi:

Delimitatori di string — i caratteri di virgolette ', ", e ` che indicano dove una string inizia e finisce.
Sequenze di escape — combinazioni che iniziano con un backslash (\) e rappresentano caratteri difficili da digitare o invisibili, come un'interruzione di riga o un tab.

Se si inserisce una virgoletta di chiusura all'interno di una string dello stesso tipo, il parser ritiene che la string sia terminata anticipatamente e il resto della riga diventa un errore di sintassi. L'escape risolve questo problema.

Sequenze di Escape Comuni

Queste sequenze con backslash sono riconosciute all'interno dei letterali string di JavaScript:

Sequenza	Significato
`\n`	Nuova riga (line feed)
`\t`	Tab orizzontale
`\r`	Ritorno a capo
`\\`	Un backslash letterale
`\'`	Una virgoletta singola letterale
`\"`	Una virgoletta doppia letterale
\`	Un backtick letterale
`\uXXXX`	Un code point Unicode (es. `é` è `é`)
`\u{XXXX}`	Un code point Unicode in valore esadecimale (es. `\u{1F600}` è 😀)

Qualsiasi carattere che non avvia una sequenza di escape riconosciuta semplicemente elimina il backslash: '\q' è semplicemente 'q'.

Come Eseguire l'Escape dei Caratteri Speciali nelle String

Per includere un carattere speciale senza attivarne il significato, anteporgli un backslash (\). Questo indica a JavaScript di trattare il carattere successivo come testo letterale.

La regola principale per le virgolette: è necessario eseguire l'escape solo del carattere di virgolette che corrisponde al delimitatore della string. Una string con virgolette singole può contenere virgolette doppie senza escape, e viceversa.

Esempio: Escape delle Virgolette

javascript— editable

Nella prima string i backslash eseguono l'escape delle virgolette singole affinché diventino parte del testo invece di terminare la string. La seconda string evita l'escape del tutto utilizzando un delimitatore diverso.

Evitare gli Escape con i Template Literal

JavaScript moderno supporta anche i template literal (backtick), che consentono di incorporare sia ' che " senza escape, estendersi su più righe e interpolare espressioni con ${...}. All'interno di un template literal è necessario eseguire l'escape solo dei backtick e di ${.

javascript— editable

Questo stampa due righe, con entrambi gli stili di virgolette intatti, senza backslash necessari.

Escape nelle Espressioni Regolari

Le espressioni regolari utilizzano anch'esse caratteri speciali, e il loro escape è fondamentale per la corrispondenza dei pattern. I metacaratteri come . (qualsiasi carattere), * (ripetizione), +, ?, (, ), [, ], {, }, ^, $, | e \ hanno significati speciali, quindi per confrontarli letteralmente è necessario eseguirne l'escape con un backslash.

Un backslash svolge due ruoli diversi nelle espressioni regolari:

Esegue l'escape di un metacarattere in modo che corrisponda letteralmente — \. corrisponde a un punto reale.
Introduce una scorciatoia di classe di caratteri — \d corrisponde a una cifra, \w a un carattere alfanumerico, \s a uno spazio bianco. Qui il backslash fa parte di un token, non esegue l'escape di una lettera.

Attenzione

When you build a regex from a string (via new RegExp(...)) every backslash must be doubled, because the string parser consumes one backslash before the regex engine ever sees it. new RegExp('\\d+') is equivalent to the literal /\d+/.

Esempio: Corrispondenza con un Punto Letterale

javascript— editable

Si noti che le regole di escape delle string e le regole di escape delle espressioni regolari sono indipendenti. Nelle string, i backslash eseguono l'escape delle virgolette e producono caratteri di controllo; nelle espressioni regolari, eseguono l'escape dei metacaratteri o formano scorciatoie come \d.

L'escape dei caratteri è particolarmente utile in:

Sviluppo web: Garantire che gli input degli utenti non compromettano il codice.
Parsing dei dati: Elaborare correttamente file di dati che contengono caratteri speciali.

Esempio: Escape dell'Input dell'Utente

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Sanitize Input Example</title>
        <script>
            function sanitizeInput(input) {
              // This function replaces less-than and greater-than characters with HTML entities
              // to prevent malicious scripts from executing when the input is rendered as HTML.
              const sanitized = input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
              return sanitized;
            }
            function displaySanitizedInput() {
              const unsafeInput = document.getElementById('unsafeInput').value;
              const sanitized = sanitizeInput(unsafeInput);
              document.getElementById('output').textContent = sanitized;
            }
        </script>
    </head>
    <body>
        <h1>Input Sanitization Example</h1>
        <p>
            Enter any HTML content below, including potentially harmful scripts.
            The example will sanitize the input to prevent script execution,
            displaying how it would be rendered safely on a web page.
        </p>
        <label for="unsafeInput">Enter unsafe content:</label>
        <input
            type="text"
            id="unsafeInput"
            value="<script>alert('hack')</script>"
        />
        <button onclick="displaySanitizedInput()">Sanitize and Display</button>
        <p>
            <span style="color:gray">Sanitized Output:</span>
            <span id="output"></span>
        </p>
    </body>
</html>

Provalo tu stesso »

Questo esempio HTML fornisce un campo di input in cui gli utenti possono inserire contenuto potenzialmente non sicuro, come un tag <script>. Quando l'utente fa clic sul pulsante, viene chiamata la funzione JavaScript sanitizeInput, che sanitizza l'input e aggiorna il contenuto testuale di un elemento <span> per visualizzare il risultato sanitizzato. Si noti che questo esempio esegue l'escape solo di < e >. In produzione, è necessario eseguire l'escape anche delle virgolette (" e ') e utilizzare una libreria di sanitizzazione dedicata per prevenire vulnerabilità nei contesti degli attributi.

Lasciare che il Linguaggio Esegua l'Escape al Posto Tuo

La maggior parte dell'escape nel mondo reale dovrebbe essere eseguita da strumenti integrati piuttosto che manualmente, il che evita errori sottili:

JSON: JSON.stringify() esegue automaticamente l'escape di virgolette, backslash e caratteri di controllo, e JSON.parse() lo inverte. Vedi Lavorare con JSON.
URL: encodeURIComponent() esegue l'escape dei caratteri non sicuri in una query string.
Regex da input dell'utente: esegui l'escape di ogni metacarattere prima di costruire un pattern.

Esempio: Escape Integrato

javascript— editable

Buone Pratiche per l'Escape dei Caratteri

Esegui l'escape solo della virgoletta che corrisponde al delimitatore della tua string, oppure cambia delimitatore per evitare l'escape del tutto.
Preferisci i template literal per le string che mescolano stili di virgolette o si estendono su più righe.
Ricorda di raddoppiare i backslash quando si passa un pattern a new RegExp().
Usa JSON.stringify, encodeURIComponent e una libreria di sanitizzazione dedicata invece di eseguire l'escape manualmente.
Testa le string e i pattern delle espressioni regolari per confermare che si comportino come previsto.

Conclusione

Padroneggiare le sequenze di escape in JavaScript migliora la capacità di uno sviluppatore di gestire string e dati in modo efficace. Che si tratti di applicazioni web o scripting lato server, comprendere come eseguire l'escape dei caratteri speciali è essenziale per uno sviluppo del codice robusto e privo di errori.

Esercitazione

Pratica

Quali delle seguenti affermazioni descrivono correttamente le regole per l'escape dei caratteri speciali nelle espressioni regolari di JavaScript?

Il backslash (\) viene usato per eseguire l'escape di caratteri speciali come il punto (.) nelle espressioni regolari.Lo slash (/) è considerato un carattere speciale e deve sempre essere preceduto da escape nelle espressioni regolari.Per cercare un punto letterale (.) in una string, anteponi un backslash (\) nell'espressione regolare.Quando si usa il costruttore RegExp, i backslash nella string non devono essere raddoppiati.