Explication détaillée de l'utilisation de chaînes de modèles dans ES6

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du modèle chaîne dans ES6 Quelles sont les précautions lors de l'utilisation de la chaîne modèle dans ES6. . Jetons un coup d'oeil.

écrit devant

Concernant ES6, il est finalement sorti le 18 juillet 2015 La poussière est retombée. Bien que les principaux navigateurs ne soient pas encore entièrement pris en charge, cela ne nous empêche pas de vouloir l'essayer. Sur le backend, vous pouvez utiliser Node.js(0.12+) ou Pour io.js et le front-end, vous pouvez également utiliser Babel ou Traceur pour pré-échapper la syntaxe vers ES5.

Concernant cette série (je ne sais pas si elle peut devenir une série, je suis toujours paresseux), je sélectionnerai au hasard certains contenus à apprendre. Tout le monde est invité à corriger activement les erreurs et à laisser des messages pour discussion.

chaînes de modèles

Utilisation

// 普通字符串
`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?

Un nouveau type de syntaxe littérale de chaîne introduit dans ES6 - chaîne modèle. Techniquement expliqué, une chaîne modèle est une chaîne littérale qui intègre des expressions dans une chaîne littérale. Pour faire simple, il s’agit d’une chaîne avec une fonction variable ajoutée.

Regardons d'abord notre utilisation précédente des chaînes :

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

Et maintenant :

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

C'est très simple.

Citation de la définition de chaîne de modèle par MDN :

Les chaînes de modèles utilisent des backticks () au lieu de guillemets doubles et simples dans les chaînes normales. 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é est transmise avec le texte environnant à une fonction par défaut, qui est chargée de connecter tous les éléments.

L'espace réservé ${} peut être n'importe quelle expression js (fonction ou opération), ou même une autre chaîne de modèle, et son résultat calculé sera affiché sous forme de chaîne. Si des chaînes telles que $ et { doivent être utilisées dans le modèle, elles doivent être échappées.

Il suffit de regarder un exemple pour comprendre.

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

Contrairement aux chaînes ordinaires, les chaînes de modèle peuvent également être écrites sur plusieurs lignes. Tous les espaces, nouvelles lignes et retraits de la chaîne de modèle seront affichés tels quels dans la chaîne générée.

Cependant, les chaînes de modèles simples présentent encore de nombreuses limitations. Tels que :

1. Les chaînes spéciales ne peuvent pas être échappées automatiquement. (Cela peut facilement conduire à des attaques par injection)

2. Ne fonctionne pas bien avec les bibliothèques d'internationalisation (c'est-à-dire ne formate pas les nombres, les dates, le texte, etc. dans des langues spécifiques)

3. Il n'y a pas de syntaxe de boucle intégrée (même les instructions conditionnelles ne sont pas prises en charge, seules les méthodes d'imbrication de modèles peuvent être utilisées)

modèle tagué

À cette fin, le concept de modèles d’étiquettes est introduit. Le modèle de balise introduit une balise avant le backtick. Cette balise est une fonction qui renvoie une valeur après une chaîne de modèle personnalisée. Prenons l'exemple ci-dessus de la chaîne de caractères spéciaux .

/**
 * 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>`;

La fonction label reçoit plusieurs paramètres.

1. Le premier paramètre est un tableau contenant des chaînes littérales (c'est-à-dire ces valeurs​​sans substitution de variable)

2. Les paramètres suivants sont les valeurs de variable remplacées​​

Changer l'exemple 1

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

Les paramètres de la balise sont ['Nom de l'entreprise :', 'Introduction :'], 'Doctor Lilac', 'Doctor Lilac est un site Web scientifique de vulgarisation sur la santé sexuelle destiné au public'.

Avec de telles méthodes, le pouvoir de contrôle est considérablement accru. Comme mentionné ci-dessus, la bibliothèque d'internationalisation et même les instructions de boucle.

Compatibilité des navigateurs

1. Côté serveur, io.js prend en charge

2. Côté navigateur, FF34+, chrome 41+

3. Côté mobile IOS 8, Android 4.4

4. Aperçu technique IE

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Comment faire fonctionner la table dans Bootstrap

js pour réaliser la conversion des millisecondes + jours + heures + minutes et secondes

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!