Sonderzeichen escapen in JavaScript

Einführung

In JavaScript ist das Escapen von Sonderzeichen eine grundlegende Fähigkeit für Entwickler, die es ermöglicht, Strings zu erstellen, die Zeichen enthalten, die vom Sprachprozessor sonst anders interpretiert würden. Dieser Artikel befasst sich eingehend mit den Methoden und der Bedeutung des Escapens von Sonderzeichen und gibt Entwicklern das Wissen und die Werkzeuge an die Hand, um komplexe Strings effektiv zu verwalten.

Sonderzeichen verstehen

Ein Sonderzeichen ist jedes Zeichen, das der JavaScript-Parser andernfalls als Teil der Syntax und nicht als wörtlichen Text interpretieren würde. Die wichtigsten fallen in zwei Gruppen:

String-Begrenzer — die Anführungszeichen ', " und `, die markieren, wo ein string beginnt und endet.
Escape-Sequenzen — Kombinationen, die mit einem Backslash (\) beginnen und Zeichen darstellen, die schwer einzutippen oder unsichtbar sind, wie etwa ein Zeilenumbruch oder ein Tabulator.

Wenn Sie ein schließendes Anführungszeichen desselben Typs innerhalb eines Strings platzieren, geht der Parser davon aus, dass der String vorzeitig beendet wurde, und der Rest der Zeile wird zu einem Syntaxfehler. Das Escapen löst dieses Problem.

Häufige Escape-Sequenzen

Diese Backslash-Sequenzen werden innerhalb von JavaScript-String-Literalen erkannt:

Sequenz	Bedeutung
`\n`	Zeilenumbruch (Line Feed)
`\t`	Horizontaler Tabulator
`\r`	Wagenrücklauf (Carriage Return)
`\\`	Ein wörtlicher Backslash
`\'`	Ein wörtliches einfaches Anführungszeichen
`\"`	Ein wörtliches doppeltes Anführungszeichen
\`	Ein wörtliches Backtick
`\uXXXX`	Ein Unicode-Codepunkt (z. B. `é` ist `é`)
`\u{XXXX}`	Ein Unicode-Codepunkt als Hex-Wert (z. B. `\u{1F600}` ist 😀)

Jedes Zeichen, das keine erkannte Escape-Sequenz einleitet, lässt den Backslash einfach wegfallen: '\q' ist nur 'q'.

Sonderzeichen in Strings escapen

Um ein Sonderzeichen einzufügen, ohne seine Bedeutung auszulösen, stellen Sie ihm einen Backslash (\) voran. Dies weist JavaScript an, das nächste Zeichen als wörtlichen Text zu behandeln.

Die wichtigste Regel für Anführungszeichen: Sie müssen nur das Anführungszeichen escapen, das dem Begrenzer Ihres Strings entspricht. Ein String mit einfachen Anführungszeichen kann unescapte doppelte Anführungszeichen enthalten, und umgekehrt.

Beispiel: Anführungszeichen escapen

javascript— editable

Im ersten String escapen die Backslashes die einfachen Anführungszeichen, sodass sie Teil des Textes werden, anstatt den String zu beenden. Der zweite String vermeidet das Escapen vollständig, indem er einen anderen Begrenzer verwendet.

Escapen mit Template Literals vermeiden

Modernes JavaScript unterstützt auch Template Literals (Backticks), mit denen Sie sowohl ' als auch " ohne Escapen einbetten, mehrere Zeilen überspannen und Ausdrücke mit ${...} interpolieren können. Innerhalb eines Template Literals müssen Sie nur Backticks und ${ escapen.

javascript— editable

Dies gibt zwei Zeilen aus, beide Anführungsstile bleiben erhalten, ohne dass Backslashes erforderlich sind.

Escapen in regulären Ausdrücken

Reguläre Ausdrücke verwenden ebenfalls Sonderzeichen, und das Escapen ist für den Musterabgleich entscheidend. Metazeichen wie . (beliebiges Zeichen), * (Wiederholung), +, ?, (, ), [, ], {, }, ^, $, | und \ haben besondere Bedeutungen. Um sie wörtlich abzugleichen, müssen Sie sie mit einem Backslash escapen.

Ein Backslash spielt in regulären Ausdrücken zwei verschiedene Rollen:

Er escaped ein Metazeichen, sodass es wörtlich übereinstimmt — \. entspricht einem echten Punkt.
Er leitet eine Zeichenklassen-Abkürzung ein — \d entspricht einer Ziffer, \w einem Wortzeichen, \s einem Leerzeichen. Hier ist der Backslash Teil eines Tokens, kein Escape-Zeichen.

Warnung

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+/.

Beispiel: Einen wörtlichen Punkt abgleichen

javascript— editable

Beachten Sie, dass String-Escaping-Regeln und Regex-Escaping-Regeln unabhängig voneinander sind. In Strings escapen Backslashes Anführungszeichen und erzeugen Steuerzeichen; in regulären Ausdrücken escapen sie Metazeichen oder bilden Abkürzungen wie \d.

Das Escapen von Zeichen ist besonders nützlich bei:

Webentwicklung: Sicherstellung, dass Benutzereingaben keinen Code beschädigen.
Datenverarbeitung: Korrekte Verarbeitung von Datendateien, die Sonderzeichen enthalten.

Beispiel: Benutzereingaben escapen

<!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>

Probier es selbst »

Dieses HTML-Beispiel stellt ein Eingabefeld bereit, in das Benutzer potenziell unsichere Inhalte eingeben können, etwa ein <script>-Tag. Wenn der Benutzer auf die Schaltfläche klickt, wird die JavaScript-Funktion sanitizeInput aufgerufen, die die Eingabe bereinigt und den Textinhalt eines <span>-Elements aktualisiert, um das bereinigte Ergebnis anzuzeigen. Beachten Sie, dass dieses Beispiel nur < und > escaped. In der Produktion sollten Sie auch Anführungszeichen (" und ') escapen und eine dedizierte Bereinigungsbibliothek verwenden, um Schwachstellen in Attributkontexten zu vermeiden.

Die Sprache für Sie escapen lassen

Das meiste Escapen in der Praxis sollte von eingebauten Werkzeugen übernommen werden statt manuell zu erfolgen, um subtile Fehler zu vermeiden:

JSON: JSON.stringify() escaped automatisch Anführungszeichen, Backslashes und Steuerzeichen, und JSON.parse() macht es rückgängig. Siehe Arbeiten mit JSON.
URLs: encodeURIComponent() escaped Zeichen, die in einem Query-String unsicher sind.
Regex aus Benutzereingaben: Escapen Sie jedes Metazeichen, bevor Sie ein Muster erstellen.

Beispiel: Eingebautes Escapen

javascript— editable

Best Practices beim Escapen von Zeichen

Escapen Sie nur das Anführungszeichen, das dem Begrenzer Ihres Strings entspricht, oder wechseln Sie den Begrenzer, um das Escapen ganz zu vermeiden.
Bevorzugen Sie Template Literals für Strings, die verschiedene Anführungsstile mischen oder mehrere Zeilen umfassen.
Denken Sie daran, Backslashes zu verdoppeln, wenn Sie ein Muster an new RegExp() übergeben.
Verwenden Sie JSON.stringify, encodeURIComponent und eine dedizierte Bereinigungsbibliothek anstelle von manuellem Escapen.
Testen Sie Strings und reguläre Ausdrücke, um sicherzustellen, dass sie sich wie erwartet verhalten.

Fazit

Die Beherrschung der Escape-Sequenzen in JavaScript verbessert die Fähigkeit eines Entwicklers, Strings und Daten effektiv zu verarbeiten. Ob für Webanwendungen oder serverseitiges Scripting — zu verstehen, wie man Sonderzeichen escaped, ist für eine robuste und fehlerfreie Codeentwicklung unerlässlich.

Übung

Welche der folgenden Aussagen beschreiben die Regeln für das Escapen von Sonderzeichen in regulären JavaScript-Ausdrücken korrekt?

Der Backslash (\) wird verwendet, um Sonderzeichen wie den Punkt (.) in regulären Ausdrücken zu escapen.Der Schrägstrich (/) gilt als Sonderzeichen und muss in regulären Ausdrücken immer escaped werden.Um nach einem wörtlichen Punkt (.) in einem string zu suchen, stellen Sie ihm in dem regulären Ausdruck einen Backslash (\) voran.Wenn der RegExp-Konstruktor verwendet wird, müssen Backslashes im string nicht verdoppelt werden.