Introduction à l'utilisation des chaînes de modèles dans ES6 (avec exemples)

Cet article vous présente une introduction à l'utilisation des chaînes de modèles dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Aperçu

Après l'émergence des chaînes de modèles, le débat sur la question de savoir si les guillemets simples ou les guillemets doubles sont meilleurs peut être retiré de la scène de l'histoire. Les chaînes de modèles ` sont les meilleures. !

Syntaxe

Texte sur une seule ligne

`string text`

Texte multiligne

`string text line 1
 string text line 2`

Expressions en ligne

`string text ${expression} string text`

balise Grammaire ( je ne l'aime pas trop)

tag `string text ${expression} string text`

Texte sur une seule ligne

Ne vous souciez pas du tout des guillemets simples et des guillemets doubles. Bien sûr, échapper à ` est inévitable. doit être perdu. Eh bien

let single=`string text, '' ""\`` // "string text, '' ""`"

texte multiligne, il n'y a pas lieu de s'inquiéter du problème de conversion d'encodage des sauts de ligne, n peut aussi disparaître

let multip=`string text line 1
 string text line 2`
 // "string text line 1
 //  string text line 2"

所以我们可以这么写代码
"
let dom=`
    我要换行
    我还要换行
`
"
虽然好像没什么卵用

Expression

C'est le rôle le plus important des chaînes de modèles, il présente de grands avantages

Une lisibilité plus forte et un épissage de chaînes moins sujet aux erreurs

let name='jack',age=23
let summary=`my name is ${name}, age is ${age}`
console.log(summary) // "my name is jack, age is 23"

Comparer avec avant La concaténation de chaînes

let name='jack',age=23
let summary='my name is ' + name + ', age is ' + age
console.log(summary) // "my name is jack, age is 23"

peut intégrer des expressions, et les expressions peuvent également être complexes, mais

let num1 = 1, num2 = 2
`${num1} + ${num2} = ${num1 + num2}` // '1 + 2 = 3'

l'imbrication de chaînes de modèles

let inner=`${`${'1'}`}` // 1

Je n'aime pas beaucoup cette fonctionnalité

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
  var str2 = strings[2]; // " "
  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }
  return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ 'Mike' } is a ${ '22' }`;
console.log(output);// that Mike is a youngster

Chaîne d'origine

Le premier paramètre de la fonction tag

stocke la chaîne d'origine, en utilisant strings.raw sans s'échapper

function tag(strings) {
  console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`; // "string text line 1 \n string text line 2"

a le même effet, et String.raw() est constitué de deux caractères. n

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
str.length;
// 6
str.split('').join(',');
// "H,i,\,n,5,!"

Évasion Babel

Code source

let name="jack",age=23
let summary=`my name is ${name}, age is ${age}`

Traduit

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!