Qu'est-ce qu'une chaîne de modèle javascript

La chaîne modèle est une nouvelle chaîne littérale introduite dans ES6 qui permet des expressions intégrées. Il s'agit d'une version améliorée de la chaîne qui utilise des guillemets doubles et des guillemets simples dans les chaînes ordinaires. En utilisant des littéraux de modèle, vous pouvez utiliser des guillemets simples et doubles dans une chaîne.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Le littéral de modèle est un littéral de chaîne qui permet des expressions intégrées. Il s'agit d'un nouveau littéral de chaîne introduit dans ES6. Vous pouvez utiliser des chaînes multilignes et des fonctions d'interpolation de chaînes. Elles étaient appelées « chaînes de modèles » dans les versions précédentes de la spécification ES2015.

Les chaînes de modèles utilisent des guillemets (` `) au lieu de guillemets doubles et de guillemets simples dans les chaînes ordinaires. Les chaînes de modèles peuvent contenir des espaces réservés pour une syntaxe spécifique (${expression}). L'expression dans l'espace réservé et le texte environnant sont transmis ensemble à une fonction par défaut, qui est chargée de concaténer toutes les parties. Si une chaîne de modèle commence par une expression, la chaîne est appelée une chaîne de modèle balisée, cette expression est généralement une fonction. , qui sera appelé après le traitement de la chaîne modèle. Vous pouvez utiliser cette fonction pour opérer sur la chaîne modèle avant de générer le résultat final. Lorsque vous utilisez un backtick (`) dans une chaîne de modèle, vous devez ajouter un caractère d'échappement () devant celui-ci.

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

Les chaînes de modèles peuvent être utilisées comme des chaînes ordinaires, peuvent également être utilisées pour définir des chaînes multilignes ou intégrer des variables dans des chaînes.

L'utilisation courante est la suivante :

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

Chaîne de modèle multiligne

La différence entre la chaîne de modèle fournie par ECMAScript 2015 et la chaîne ordinaire est que les espaces, l'indentation et les nouvelles lignes dans la chaîne de modèle seront conservés. .

L'exemple de code est le suivant :

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

1. Chaîne de modèle avec expressions

La chaîne de modèle prend en charge les expressions intégrées et la structure syntaxique est la suivante :

`${expression}`

L'exemple de code est le suivant :

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 chaînes de modèles

Les fonctions des chaînes de modèles ne sont pas seulement celles ci-dessus. Il peut suivre le nom d'une fonction qui sera appelée pour traiter cette chaîne de modèle. C'est ce qu'on appelle la fonctionnalité de modèle balisé.

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

Le modèle de balise n'est pas réellement un modèle, mais une forme spéciale d'appel de fonction. « Étiquette » fait référence à la fonction et la chaîne de modèle qui la suit immédiatement est son paramètre.

Chaîne brute

Dans le premier paramètre de la fonction tag, il y a un attribut spécial raw, grâce auquel vous pouvez accéder à la chaîne d'origine de la chaîne modèle au lieu des caractères spécialement remplacés.

L'exemple de code est le suivant :

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

De plus, l'utilisation de la méthode String.raw() pour obtenir la chaîne d'origine de la touche de fonction est la même que la fonction de modèle par défaut et la création de concaténation de chaînes.

L'exemple de code est le suivant :

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

Déterminer si une certaine chaîne est incluse

1. La méthode include()

includes() est utilisée pour déterminer si une chaîne est incluse dans une autre chaîne, en fonction de le jugement Le résultat renvoie vrai ou faux.

La structure syntaxique est la suivante :

str.includes(searchString[, position])

Description du paramètre :

• searchString : La chaîne à rechercher dans cette chaîne.

• position : (facultatif) La position d'index de la chaîne actuelle pour commencer la recherche de la sous-chaîne. La valeur par défaut est 0.

Il convient de noter que la méthode include() est sensible à la casse.

L'exemple de code est le suivant :

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

La méthode include() fournie par ECMAScript 2015 est sensible à la casse. Maintenant, nous étendons nous-mêmes une méthode insensible à la casse,

L'exemple de code est le suivant :

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. Méthode StartingWith()

La méthode startsWith() est utilisée pour déterminer si la chaîne actuelle commence par une autre sous-chaîne donnée et renvoie vrai ou faux en fonction du résultat de la détermination.

La structure syntaxique est la suivante :

str.startsWith(searchString[, position])

Description du paramètre :

• searchString : La chaîne à rechercher dans cette chaîne.

• position : (facultatif) La position d'index de la chaîne actuelle pour commencer la recherche de la sous-chaîne. La valeur par défaut est 0.

Il convient de noter que la méthode startWith() est sensible à la casse.

L'exemple de code est le suivant :

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. Méthode endsWith()

La méthode endsWith() est utilisée pour déterminer si la chaîne actuelle "se termine" par une autre sous-chaîne donnée et renvoie vrai en fonction du résultat de la détermination ou faux. .

La structure syntaxique est la suivante :

str.endsWith(searchString[, position])

Description du paramètre :

• searchString : La chaîne à rechercher dans cette chaîne.

• position : (facultatif) La position d'index de la chaîne actuelle pour commencer la recherche de sous-chaînes. La valeur par défaut est 0.

Il convient de noter que la méthode endWith() est sensible à la casse.

L'exemple de code est le suivant :

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

Les deux méthodes suivantes peuvent être utilisées pour étendre vous-même un code insensible à la casse.

【Recommandations associées : Tutoriel d'apprentissage Javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!