Partage d'exemples de chaînes de modèles ES6-js tutoriel-php.cn

Partage d'exemples de chaînes de modèles ES6

小云云

Libérer： 2018-01-26 16:44:12

original

1719 Les gens l'ont consulté

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.

ES6 nous fournit des chaînes de modèles et la syntaxe utilise des backticks`. Les chaînes de modèles présentent les trois avantages suivants :

Texte multiligne
Insertion de variables dans des chaînes
Insérer des expressions dans des chaînes

Syntaxe de base

La déclaration des chaînes de modèle est la même que celle des chaînes ES5.

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

Copier après la connexion

Texte multiligne

À l'époque où Jquery était populaire, nous collions souvent des fragments HTML puis remplaçons des nœuds. Écrivez un morceau de code ES5 pour que tout le monde puisse l'expérimenter :

var str = '<html>'
+ '<p>啦拉拉</p>'
+ '<p>xixixi</p>'
+ '</html>';
console.log(str);// <html><p>啦拉拉</p><p>xixixi</p></html>

Copier après la connexion

ES6 prend en charge le texte multiligne et le code ci-dessus est beaucoup plus facile à implémenter.

let str4ES6 = `<html>
 <p>啦拉拉</p>
 <p>xixixix</p>
</html>`;

console.log(str4ES6);

Copier après la connexion

Vous pouvez insérer des variables ou des expressions

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

Copier après la connexion

Les chaînes de modèles ES6 sont beaucoup plus faciles à implémenter. La syntaxe clé est ${}, dans laquelle n'importe quelle expression js peut être insérée.

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

Copier après la connexion

Résumé

La chaîne de modèle ES6 est si simple et facile à utiliser.

Recommandations associées :

Explication détaillée de la conversion mutuelle entre les nombres JS et les chaînes

Une collection de méthodes couramment utilisées pour intercepter les chaînes dans JS

Comment épisser ajax json et string à l'aide de jquery

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!