Was ist eine Javascript-Vorlagenzeichenfolge?

Template-String ist ein neues String-Literal, das eingebettete Ausdrücke ermöglicht. Es handelt sich um eine erweiterte Version von String, die Backticks anstelle von doppelten und einfachen Anführungszeichen in gewöhnlichen Strings verwendet. Durch die Verwendung von Vorlagenliteralen können Sie in einer Zeichenfolge sowohl einfache als auch doppelte Anführungszeichen verwenden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Template-Literal ist ein String-Literal, das eingebettete Ausdrücke ermöglicht. Es ist ein neues String-Literal, das in ES6 eingeführt wurde. Sie können mehrzeilige Zeichenfolgen und Zeichenfolgeninterpolationsfunktionen verwenden. In früheren Versionen der ES2015-Spezifikation wurden sie als „Vorlagenzeichenfolgen“ bezeichnet.

Vorlagenzeichenfolgen verwenden Backticks (` `) anstelle von doppelten und einfachen Anführungszeichen in gewöhnlichen Zeichenfolgen. Vorlagenzeichenfolgen können Platzhalter für eine bestimmte Syntax (${expression}) enthalten. Der Ausdruck im Platzhalter und der umgebende Text werden zusammen an eine Standardfunktion übergeben, die für die Verkettung aller Teile verantwortlich ist. Wenn eine Vorlagenzeichenfolge mit einem Ausdruck beginnt, wird die Zeichenfolge als getaggte Vorlagenzeichenfolge bezeichnet. Dieser Ausdruck ist normalerweise eine Funktion , die aufgerufen wird, nachdem die Vorlagenzeichenfolge verarbeitet wurde. Mit dieser Funktion können Sie die Vorlagenzeichenfolge bearbeiten, bevor das Endergebnis ausgegeben wird. Wenn Sie den Backtick (`) innerhalb einer Vorlagenzeichenfolge verwenden, müssen Sie davor ein Escape-Zeichen () hinzufügen.

`\`` === "`" // --> true

Vorlagenzeichenfolgen können als normale Zeichenfolgen verwendet werden, können auch zum Definieren mehrzeiliger Zeichenfolgen oder zum Einbetten von Variablen in Zeichenfolgen verwendet werden.

Allgemeine Verwendung ist wie folgt:

// 使用 ` 符号包裹的字符串称为模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str

Mehrzeilige Vorlagenzeichenfolge

Der Unterschied zwischen der von ECMAScript 2015 bereitgestellten Vorlagenzeichenfolge und der normalen Zeichenfolge besteht darin, dass die Leerzeichen, Einrückungen und Zeilenumbrüche in der Vorlagenzeichenfolge beibehalten werden .

Der Beispielcode lautet wie folgt:

let str = `this 
      is str`
console.log(typeof str, str);
/*
  string this 
      is str
*/

1. Vorlagenzeichenfolge mit Ausdrücken

Die Vorlagenzeichenfolge unterstützt eingebettete Ausdrücke und die Syntaxstruktur lautet wie folgt:

`${expression}`

Der Beispielcode lautet wie folgt:

let str1 = `this is str1`
let str2 = `this is str2`
// 只需要将表达式写入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2

Tagged Vorlagenzeichenfolgen

Die Funktionen von Vorlagenzeichenfolgen sind nicht nur die oben genannten. Es kann dem Namen einer Funktion folgen, die aufgerufen wird, um diese Vorlagenzeichenfolge zu verarbeiten. Dies wird als getaggte Vorlagenfunktion bezeichnet.

let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);

Tag-Vorlage ist eigentlich keine Vorlage, sondern eine spezielle Form eines Funktionsaufrufs. „Label“ bezieht sich auf die Funktion und die direkt darauf folgende Vorlagenzeichenfolge ist ihr Parameter.

Raw-String

Im ersten Parameter der Tag-Funktion gibt es ein spezielles Attribut raw, über das Sie anstelle der speziell ersetzten Zeichen auf den Original-String des Template-Strings zugreifen können.

Der Beispielcode lautet wie folgt:

/*
  原始字符串 应用在带标签的模板字符串中
  * 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
  * 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
*/
function tag(string) {
  console.log(string.raw[0]);
}
tag `string test line1 \n string test line2` // string test line1 \n string test line2

Darüber hinaus ist die Verwendung der String.raw()-Methode zum Abrufen der Originalzeichenfolge der Funktionstaste dasselbe wie die Standardvorlagenfunktion und die Erstellung der Zeichenfolgenverkettung.

Der Beispielcode lautet wie folgt:

let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符
console.log(str); // Hi\n5!

Bestimmen Sie, ob eine Zeichenfolge enthalten ist

1. Includes()-Methode

includes()-Methode wird verwendet, um zu bestimmen, ob eine Zeichenfolge in einer anderen Zeichenfolge enthalten ist Beurteilung Das Ergebnis gibt wahr oder falsch zurück.

Die Syntaxstruktur ist wie folgt:

str.includes(searchString[, position])

Parameterbeschreibung:

• searchString: Die Zeichenfolge, nach der in dieser Zeichenfolge gesucht werden soll.

• Position: (optional) Die Indexposition der aktuellen Zeichenfolge, um mit der Suche nach der Teilzeichenfolge zu beginnen. Der Standardwert ist 0.

Es ist zu beachten, dass bei der Methode Includes() die Groß-/Kleinschreibung beachtet wird.

Der Beispielcode lautet wie folgt:

let str = 'abcdef';
console.log(str.includes('c')); // true
console.log(str.includes('d')); // true
console.log(str.includes('z')); // false
console.log(str.includes('A')); // false

Die von ECMAScript 2015 bereitgestellte Methode Includes() unterscheidet zwischen Groß- und Kleinschreibung. Jetzt erweitern wir selbst eine Methode, bei der die Groß- und Kleinschreibung nicht berücksichtigt wird.

Der Beispielcode lautet wie folgt:

String.prototype.MyIncludes = function (searchStr, index = 0) {
  // 将需要判断的字符串全部改成小写形式
  let str = this.toLowerCase()
  // 将传入的字符串改成小写形式
  searchStr = searchStr.toLowerCase();
  return str.includes(searchStr, index)
}
let str = 'abcdef';
console.log(str.MyIncludes('c')); // true
console.log(str.MyIncludes('d')); // true
console.log(str.MyIncludes('z')); // false
console.log(str.MyIncludes('A')); // true

2. Die Methode „startsWith()“

startsWith() wird verwendet, um zu bestimmen, ob die aktuelle Zeichenfolge mit einer anderen gegebenen Teilzeichenfolge beginnt, und gibt basierend auf dem Bestimmungsergebnis „true“ oder „false“ zurück.

Die Syntaxstruktur ist wie folgt:

str.startsWith(searchString[, position])

Parameterbeschreibung:

• searchString: Die Zeichenfolge, nach der in dieser Zeichenfolge gesucht werden soll.

• Position: (optional) Die Indexposition der aktuellen Zeichenfolge, um mit der Suche nach der Teilzeichenfolge zu beginnen. Der Standardwert ist 0.

Es ist zu beachten, dass bei der Methode „startsWith()“ die Groß-/Kleinschreibung beachtet wird.

Der Beispielcode lautet wie folgt:

let str = 'abcdef';
/*
  * startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头， 并根据判断结果返回 true 或 false。
  * str.startsWith(searchString[, position])
    参数说明
      searchString: 要在此字符串中搜索的字符串。 
      position: (可选) 从当前字符串的哪个索引位置开始搜寻子字符串， 默认值为 0。
  !值得注意的是startsWith() 方法是区分大小写的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase

3. Methode „endsWith()“

endsWith() wird verwendet, um zu bestimmen, ob die aktuelle Zeichenfolge mit einer anderen gegebenen Teilzeichenfolge „endet“, und gibt basierend auf dem Bestimmungsergebnis „true“ oder „false“ zurück .

Die Syntaxstruktur ist wie folgt:

str.endsWith(searchString[, position])

Parameterbeschreibung:

• searchString: Die Zeichenfolge, nach der in dieser Zeichenfolge gesucht werden soll.

• position: (optional) Die Indexposition der aktuellen Zeichenfolge, an der nach Teilzeichenfolgen gesucht werden soll. Der Standardwert ist 0.

Es ist erwähnenswert, dass bei der Methode „endsWith()“ die Groß-/Kleinschreibung beachtet wird.

Der Beispielcode lautet wie folgt:

let str = 'abcdef';
console.log(str.endsWith('f')); // true
console.log(str.endsWith('c', 3)); // true
console.log(str.endsWith('c')); // flase

Die folgenden beiden Methoden können verwendet werden, um eine Methode ohne Berücksichtigung der Groß- und Kleinschreibung selbst zu erweitern.

【Verwandte Empfehlungen: Javascript-Lern-Tutorial】

Das obige ist der detaillierte Inhalt vonWas ist eine Javascript-Vorlagenzeichenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!