ES6 für den Moment: Vorlagenzeichenfolgen

ES6 Template Literale: Ein moderner Ansatz zu JavaScript -Zeichenfolgen

Schlüsselhighlights:

• ES6 (ECMAScript 2015) verbessert das JavaScript erheblich und führt die für die modernen Webentwicklung entscheidende Funktionen ein.
• Vorlagenliterale, die Backticks (`) als Grenzwerte verwenden, revolutionieren die String -Handhabung in JavaScript. Sie ermöglichen eingebettete Ausdrücke und Multiline -Saiten.
• Eine Tag -Funktion kann auf eine Vorlage buchstäblich vorbereitet werden, die eine benutzerdefinierte Verarbeitung (z. B. URL -Codierung) der resultierenden Zeichenfolge ermöglicht.
• Während der modernen Browser weit verbreitet ist, kann ES6 für ältere Browser auf ES5 umgesetzt werden. Die Funktionserkennung sorgt für die Kompatibilität.

(Dieser Artikel ist Teil einer Microsoft Web Development -Serie. Dank unserer Partner für die Unterstützung von SitePoint.)

ES6 ist die Gegenwart und Zukunft von JavaScript. Diese Serie untersucht ihre nützlichsten Funktionen. Mein Codierungsstil verwendet konsequent einzelne Zitate für Zeichenfolgen und bietet Vorteile in der HTML -String -Konstruktion:

<code class="language-javascript">// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; </code>

Fluchtzeichen vermeiden, verbessert die Lesbarkeit. Während HTML flexibel ist, ist die Priorisierung des menschlich-lesbaren Codes von entscheidender Bedeutung. Ich habe aus früheren Erfahrungen mit der Komplexität von DHTML gelernt, um sauberere Lösungen zu schätzen.

Expressionssubstitution und verstärkte Lesbarkeit:

Meine Präferenz für einzelne Zitate beruht auf meinem PHP -Hintergrund, wo sie eine variable Substitution verhindern und die Leistung verbessern. JavaScript fehlte diese Funktion zuvor, was eine String -Verkettung erforderte:

<code class="language-javascript">var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' + sound); </code>

Dies wird mit längeren Saiten umständlich und führt häufig zu Linker. JavaScripts mangelnder multiliner Multiline -Saiten kompliziert die Angelegenheit weiter.

Vorlagen Literale: Eine Lösung:

ES6 -Template Literale lösen diese Probleme. Der Backtick (`) erlaubt Expressionsubstitution und Multiline -Saiten:

<code class="language-javascript">var animal = 'cow';
var sound = 'moo';

alert(`The animal is ${animal} and its sound is ${sound}`);</code>

Das ${} Konstrukt übernimmt jeden JavaScript -Ausdruck und aktiviert Berechnungen und Zugriff auf Objekteigenschaften:

<code class="language-javascript">var output = `ten times two is ${10 * 2}`;</code>

Multiline Saiten sind jetzt mühelos:

<code class="language-javascript">var list = `
- Buy Milk
- Be kind to Pandas
- Forget about Dre
`;</code>

markierte Vorlagen:

Vorlage Literale können mit einer Funktion "markiert" werden, um benutzerdefinierte String -Manipulation zu aktivieren:

<code class="language-javascript">function urlify(str) {
  return encodeURIComponent(str);
}

urlify`http://example.com`;</code>

Diese Funktion empfängt die Zeichenfolge als Argument, sodass Operationen wie URL -Codierung.

Zugriff auf Zeichenfolgenteile in einer Tag -Funktion:

Eine Tag -Funktion empfängt sowohl die String -Teile als auch die eingebetteten Ausdrücke als separate Argumente:

<code class="language-javascript">function tag(strings, values) {
  console.log(strings); // Array of string parts
  console.log(values);  // Array of embedded expressions
}

tag`you ${3 + 4} it`;</code>

Die Eigenschaft strings.raw enthält die Roh -String -Teile, einschließlich Escape -Sequenzen.

Browserkompatibilität und Merkmalserkennung:

Während die meisten modernen Browser Template -Literale unterstützen, ist die ES6 -Transpilation (z. B. mit Babel) für ältere Browser erforderlich. Die Funktionserkennung sorgt für die Kompatibilität:

<code class="language-javascript">// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; </code>

Weitere Lektüre und Ressourcen: (Links für Kürze weggelassen, aber der ursprüngliche Text enthielt Links zu verschiedenen Artikeln zu Vorlagenliteralen.)

Microsoft Web Development -Serie: (Details zu den Webentwicklungsressourcen von Microsoft, einschließlich Tools und Lernmaterialien, wurden in den Originaltext aufgenommen, aber hier für die Kürze weggelassen.)

häufig gestellte Fragen: (Der ursprüngliche Text enthielt einen umfassenden FAQ -Abschnitt über Vorlagenliterale, der hier aufgrund von Längenbeschränkungen weggelassen wird.)

Das obige ist der detaillierte Inhalt vonES6 für den Moment: Vorlagenzeichenfolgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!