Ads by ProfitSence
Close

JavaScript Template Literals

Last Updated on jeudi 6 oct. 2022

javascript multiline string

Avant ES6, vous utilisez des guillemets simples (') ou des citations doubles (") pour envelopper un littéral à chaîne. Et les chaînes ont une fonctionnalité très limitée.

Pour vous permettre de résoudre des problèmes plus complexes, les catégories de modèle ES6 fournissent la syntaxe qui vous permet de travailler avec des chaînes de manière plus sûre et plus propre.

Dans ES6, vous créez un modèle littéral en enveloppant votre texte en backticks (`) comme suit:

			
					let simple = C'est le bon;

			
	

string interpolation javascript

  • Une chaîne multiligne: une chaîne pouvant couvrir plusieurs lignes.
  • Formatage des chaînes: capacité de substituer une partie de la chaîne pour les valeurs des variables ou des expressions. Cette fonctionnalité s'appelle également une interpolation de chaîne.
  • HTML s'échappant: la possibilité de transformer une chaîne de manière à ce qu'il soit sûr d'inclure dans HTML.

template string

La syntaxe de base des de modèle JavaScript

			
					let str = Template literal dans ES6;

console.log(str);// Template literal dans ES6
console.log(str.length); // 25
console.log(typeof str);// string

			
	

multilignes

Avant l'ES6, vous utilisez la technique suivante pour créer une chaîne multiligne en incluant manuellement le caractère Newline (n) de la chaîne comme suit.

			
					var msg = 'Multiligne n
string';

console.log(msg);
// Multiligne
// string

			
	

Notez que la barre oblique inverse () placée après le caractère de la nouvelle ligne (n) indique la poursuite de la chaîne plutôt qu'une nouvelle ligne.

javascript template

Tagged Templates

Le modèle étiqueté est écrit comme une définition de la fonction. Cependant, vous ne passez pas de parenthèses() lorsque vous appelez le littéral.

			
					function tagExample(strings) {
    return strings;
}

const result = tagExampleBonjour Absolon;

console.log(result); // [ 'Bonjour Absolon' ]

			
	

Vous pouvez également transmettre les valeurs et les expressions comme les arguments restants.

			
					function tagExample(strings, nameValue) {
    let str0 = strings[0];
    let str1 = strings[1];

    return ${str0}${nameValue}${str1};
}

let name = 'Absolon' ;

const result = tagExampleBonjour ${name}, Comment vas-tu?;

console.log(result); // Bonjour Absolon, Comment vas-tu?

			
	

De cette manière, vous pouvez également transmettre de multiples arguments.