Detaillierte Erläuterung der Verwendung von Vorlagenzeichenfolgen in ES6

Dieses Mal werde ich Ihnen die Verwendung der Vorlage Zeichenfolge in ES6 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vorlagenzeichenfolge in ES6? . Werfen wir einen Blick darauf.

vorne geschrieben

Was ES6 betrifft, wurde es schließlich am 18. Juli 2015 veröffentlicht Der Staub hat sich gelegt. Obwohl die gängigen Browser noch keine vollständige Unterstützung bieten, hindert uns das nicht daran, es auszuprobieren. Im Backend können Sie Node.js(0.12+) oder verwenden Für io.js kann das Front-End auch Babel oder Traceur verwenden, um die Syntax vorab in ES5 zu maskieren.

Bezüglich dieser Serie (ich weiß nicht, ob daraus eine Serie werden kann, ich bin immer faul) werde ich nach dem Zufallsprinzip einige Inhalte zum Lernen auswählen. Jeder ist willkommen, aktiv Fehler zu korrigieren und Nachrichten zur Diskussion zu hinterlassen.

Vorlagenzeichenfolgen

Verwendung

// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

Eine neue Art von String-Literal-Syntax, die in ES6 eingeführt wurde – Template-String. Technisch gesehen ist eine Vorlagenzeichenfolge ein Zeichenfolgenliteral, das Ausdrücke in ein Zeichenfolgenliteral einbettet. Einfach ausgedrückt handelt es sich um einen String mit zusätzlicher Variablenfunktion.

Schauen wir uns zunächst unsere bisherige Verwendung von Zeichenfolgen an:

/**
 * Before ES6 字符串拼接
 */
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名：' + name + '\n'+
      '简介：'+ desc;
  return tpl;
}

Und jetzt:

var html = `公司名：${name}
  简介：${desc}`;

Es ist ganz einfach.

Zitat aus MDNs Definition der Vorlagenzeichenfolge:

Vorlagenzeichenfolgen verwenden Backticks () anstelle von doppelten und einfachen Anführungszeichen in normalen Zeichenfolgen. Vorlagenzeichenfolgen können Platzhalter für eine bestimmte Syntax (${expression}) enthalten. Der Ausdruck im Platzhalter wird zusammen mit dem umgebenden Text an eine Standardfunktion übergeben, die für die Verbindung aller Teile verantwortlich ist.

Der Platzhalter ${} kann ein beliebiger js-Ausdruck (Funktion oder Operation) oder sogar eine andere Vorlagenzeichenfolge sein, und das berechnete Ergebnis wird als Zeichenfolge ausgegeben. Wenn Zeichenfolgen wie $ und { in der Vorlage verwendet werden müssen, müssen sie maskiert werden.

Schauen Sie sich einfach ein Beispiel an, um es zu verstehen.

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"

Im Gegensatz zu gewöhnlichen Zeichenfolgen können Vorlagenzeichenfolgen auch in mehreren Zeilen geschrieben werden. Alle Leerzeichen, Zeilenumbrüche und Einzüge in der Vorlagenzeichenfolge werden unverändert in der generierten Zeichenfolge ausgegeben.

Einfache Vorlagenzeichenfolgen weisen jedoch immer noch viele Einschränkungen auf. Zum Beispiel:

1. Spezielle Zeichenfolgen können nicht automatisch maskiert werden. (Dies kann leicht zu Injektionsangriffen führen)

2. Funktioniert nicht gut mit Internationalisierungsbibliotheken (d. h. formatiert keine Zahlen, Daten, Texte usw. in bestimmten Sprachen)

3. Es gibt keine integrierte Schleifensyntax (auch bedingte Anweisungen werden nicht unterstützt, es können nur Vorlagenverschachtelungsmethoden verwendet werden)

getaggte Vorlage

Zu diesem Zweck wird das Konzept der Etikettenvorlagen eingeführt. Die Tag-Vorlage führt ein Tag vor dem Backtick ein. Dieses Tag ist eine Funktion, die nach einer benutzerdefinierten Vorlagenzeichenfolge einen Wert zurückgibt. Nehmen Sie das obige Beispiel der Zeichenfolge Sonderzeichen .

/**
 * HTML 标签转义
 * @param {Array.<DOMString>} templateData 字符串类型的tokens
 * @param {...} ..vals 表达式占位符的运算结果tokens
 * 
 */
function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i < arguments.length; i++) {
  var arg = String(arguments[i]);
  // Escape special characters in the substitution.
  s += arg.replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">");
  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

Die Label-Funktion empfängt mehrere Parameter.

1. Der erste Parameter ist ein Array, das String-Literale enthält (also jene Werte ohne Variablenersetzung)

2. Die folgenden Parameter sind die ersetzten Variablenwerte​​

Beispiel 1 ändern

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
tag`公司名：${name}简介：${desc}`

Die Parameter des Tags sind ['Firmenname:', 'Einleitung:'], 'Doctor Lilac', 'Doctor Lilac ist eine populärwissenschaftliche Website zur sexuellen Gesundheit für die Öffentlichkeit'.

Mit solchen Methoden wird die Kontrollkraft erheblich erhöht. Wie oben erwähnt, die Internationalisierungsbibliothek und sogar Schleifenanweisungen.

Browserkompatibilität

1. Serverseitig unterstützt io.js

2. Browserseite, FF34+, Chrome 41+

3. mobiles IOS 8, Android 4.4

4. IE Tech Preview

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

So bedienen Sie die Tabelle in Bootstrap

js, um die Konvertierung von Millisekunden + Tagen + Stunden + Minuten und Sekunden zu erreichen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Vorlagenzeichenfolgen in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!