String.raw()

Probieren Sie es aus

// Create a variable that uses a Windows
// path without escaping the backslashes:
const filePath = String.raw`C:\Development\profile\about.html`;

console.log(`The file was uploaded from: ${filePath}`);
// Expected output: "The file was uploaded from: C:\Development\profile\about.html"

Syntax

String.raw(strings)
String.raw(strings, sub1)
String.raw(strings, sub1, sub2)
String.raw(strings, sub1, sub2, /* , */ subN)

String.raw`templateString`

Parameter

strings

Gut geformtes Template-Literal-Array-Objekt, wie { raw: ['foo', 'bar', 'baz'] }. Sollte ein Objekt mit einer raw Eigenschaft sein, dessen Wert ein array-hnliches Objekt von Strings ist.

sub1, , subN

Beinhaltet Ersetzungswerte.

templateString

Ein Template-Literal, optional mit Ersetzungen (${...}).

Rckgabewert

Die rohe String-Darstellung eines gegebenen Template-Literals.

Ausnahmen

TypeError

Wird ausgelst, wenn das erste Argument keine raw Eigenschaft hat oder die raw Eigenschaft undefined oder null ist.

Beschreibung

In den meisten Fllen wird String.raw() mit Template-Literalen verwendet. Die oben erwhnte erste Syntax wird nur selten genutzt, da die JavaScript-Engine dies fr Sie mit den richtigen Argumenten aufruft (genau wie bei anderen Tag-Funktionen).

String.raw() ist der einzige eingebaute Template-Literal-Tag. Es hat enge semantische hnlichkeit mit einem nicht getaggten Literal, da es alle Argumente zusammenfgt und einen String zurckgibt. Sie knnen es sogar mit normalem JavaScript-Code neu implementieren.

Wenn String.raw() mit einem Objekt aufgerufen wird, dessen raw Eigenschaft keine length Eigenschaft oder eine nicht positive length hat, wird ein leerer String "" zurckgegeben. Wenn substitutions.length < strings.raw.length - 1 (d.h. es gibt nicht genug Ersetzungen, um die Platzhalter zu fllen was in einem gut geformten getaggten Template-Literal nicht passieren kann), werden die restlichen Platzhalter mit leeren Strings gefllt.

Beispiele

Verwendung von String.raw()

String.raw`Hi\n${2 + 3}!`;
// 'Hi\\n5!', the character after 'Hi'
// is not a newline character,
// '\' and 'n' are two characters.

String.raw`Hi\u000A!`;
// 'Hi\\u000A!', same here, this time we will get the
// \, u, 0, 0, 0, A, 6 characters.
// All kinds of escape characters will be ineffective
// and backslashes will be present in the output string.
// You can confirm this by checking the .length property
// of the string.

const name = "Bob";
String.raw`Hi\n${name}!`;
// 'Hi\\nBob!', substitutions are processed.

Rohe Strings, die Template-Literal-Syntax enthalten

String.raw ist eine Funktion, daher kann es die grundlegende Template-Literal-Syntax wie Backticks als Trennzeichen und ${ fr Ersetzungen nicht umgehen. Wenn Sie diese Zeichen in den Ausgabestring einfgen mchten, mssen Sie sie mit Backslashes maskieren. Da String.raw jedoch rohe Strings ausgibt, werden die Backslashes in der Ausgabe beibehalten.

String.raw`Hi \${name}!`;
// 'Hi \\${name}!', the dollar sign is escaped; there's no interpolation.
// However, the backslash is still present in the output string.

String.raw`This is a backtick: \``;
// 'This is a backtick: \\`', the backslash is still present.

String.raw`A trailing backslash: \\`;
// 'A trailing backslash: \\\\', both backslashes are present.
// If you use a single backslash at the end, it escapes the ending backtick,
// causing subsequent code to be included in the string.

Um dieses Problem zu umgehen, knnen Sie eine Ersetzung verwenden, um diese Zeichen einzufgen.

String.raw`Hi ${"$"}{name}!`;
// 'Hi ${name}!', the substitution inserts a single dollar sign.
String.raw`This is a backtick: ${"`"}`;
// 'This is a backtick: `', the substitution inserts a single backtick.
String.raw`A trailing backslash: ${"\\"}`;
// 'A trailing backslash: \\', the substitution inserts a single backslash.

Dieser Ansatz funktioniert fr String.raw, weil es einfach die rohen Strings und die Ersetzungen zusammenfgt. Im Allgemeinen gibt es leider keine Mglichkeit fr einen Template-Literal-Tag, einen rohen String zu erhalten, der nicht maskierte Template-Literal-Syntax enthlt.

function tag(strings) {
  console.log(strings.raw[0]); // This will never contain unescaped `${` or backticks
}

Verwendung von String.raw mit RegExp

Kombinieren eines String.raw Template-Literals mit dem RegExp() Konstruktor ermglicht es Ihnen, regulre Ausdrcke mit dynamischen Teilen zu erstellen (was mit Regex-Literalen nicht mglich ist), ohne regulre Ausdrucks-Escape-Sequenzen doppelt zu maskieren (\\) (was mit normalen String-Literalen nicht mglich ist). Dies ist auch wertvoll in Strings, die viele Schrgstriche enthalten, wie Dateipfade oder URLs.

// A String.raw template allows a fairly readable regular expression matching a URL:
const reRawTemplate = new RegExp(
  String.raw`https://developer\.mozilla\.org/en-US/docs/Web/JavaScript/Reference/`,
);

// The same thing with a regexp literal looks like this, with \/ for
// each forward slash:
const reRegexpLiteral =
  /https:\/\/developer\.mozilla\.org\/en-US\/docs\/Web\/JavaScript\/Reference\//;

// And the same thing written with the RegExp constructor and a
// traditional string literal, with \\. for each period:
const reStringLiteral = new RegExp(
  "https://developer\\.mozilla\\.org/en-US/docs/Web/JavaScript/Reference/",
);

// String.raw also allows dynamic parts to be included
function makeURLRegExp(path) {
  return new RegExp(String.raw`https://developer\.mozilla\.org/${path}`);
}

const reDynamic = makeURLRegExp("en-US/docs/Web/JavaScript/Reference/");
const reWildcard = makeURLRegExp(".*");

Aufbau eines Identitts-Tags

Viele Werkzeuge behandeln Literale, die mit einem bestimmten Namen getaggt sind, auf besondere Weise.

// Some formatters will format this literal's content as HTML
const doc = html`<!doctype html>
  <html lang="en-US">
    <head>
      <title>Hello</title>
    </head>
    <body>
      <h1>Hello world!</h1>
    </body>
  </html>`;

Man knnte naiv das html Tag so implementieren:

const html = String.raw;

Dies funktioniert in der Tat fr den oben genannten Fall. Da String.raw jedoch die rohen String-Literale zusammenfgen wrde, anstatt die "gekochten", wrden Escape-Sequenzen nicht verarbeitet.

const doc = html`<canvas>\n</canvas>`;
// "<canvas>\\n</canvas>"

Dies ist mglicherweise nicht das, was Sie bei einem "echten Identitts"-Tag mchten, bei dem das Tag nur fr Markup ist und den Wert des Literals nicht ndert. In diesem Fall knnen Sie ein benutzerdefiniertes Tag erstellen und das "gekochte" (d.h. Escape-Sequenzen werden verarbeitet) Literal-Array an String.raw bergeben, wobei Sie vorgeben, dass sie rohe Strings sind.

const html = (strings, ...values) => String.raw({ raw: strings }, ...values);
// Some formatters will format this literal's content as HTML
const doc = html`<canvas>\n</canvas>`;
// "<canvas>\n</canvas>"; the "\n" becomes a line break

Beachten Sie, dass das erste Argument ein Objekt mit einer raw Eigenschaft ist, deren Wert ein array-hnliches Objekt (mit einer length Eigenschaft und ganzzahligen Indizes) ist, das die getrennten Strings im Template-Literal darstellt. Die restlichen Argumente sind die Ersetzungen. Da der raw Wert jedes array-hnliche Objekt sein kann, kann es sogar ein String sein! Zum Beispiel wird 'test' als ['t', 'e', 's', 't'] behandelt. Das folgende ist quivalent zu `t${0}e${1}s${2}t`:

String.raw({ raw: "test" }, 0, 1, 2); // 't0e1s2t'

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Polyfill von String.raw in core-js
• es-shims Polyfill von String.raw
• Template-Literale
• String
• Lexikale Grammatik