ES6 pour l'instant: chaînes de modèle

Modèle ES6 Literales: une approche moderne des chaînes JavaScript

Faits saillants de la clé:

• ES6 (ECMAScript 2015) améliore considérablement JavaScript, l'introduction des fonctionnalités cruciales pour le développement Web moderne.
• Les littéraux du modèle, en utilisant des backticks (`) comme délimiteurs, révolutionnent la gestion des chaînes en javascript. Ils permettent des expressions intégrées et des chaînes multilines.
• Une fonction de balise peut être appliquée à un modèle littéral, permettant un traitement personnalisé (par exemple, encodage d'URL) de la chaîne résultante.
• Bien que largement pris en charge par les navigateurs modernes, ES6 peut être transpiré à ES5 pour les navigateurs plus anciens. La détection des fonctionnalités assure la compatibilité.

(Cet article fait partie d'une série de développement Web Microsoft. Merci à nos partenaires de prendre en charge SitePoint.)

es6 est le présent et l'avenir de JavaScript. Cette série explore ses fonctionnalités les plus utiles. Mon style de codage utilise systématiquement des devis uniques pour les chaînes, offrant des avantages dans la construction de chaînes HTML:

// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; 

Éviter les personnages d'échappement améliore la lisibilité. Bien que le HTML soit flexible, la priorisation du code lisible par l'homme est essentielle. J'ai appris des expériences passées avec les complexités du DHTML pour apprécier les solutions plus propres.

Substitution d'expression et lisibilité accrue:

Ma préférence pour les citations uniques découle de mon fond PHP, où ils empêchent la substitution variable, améliorant les performances. JavaScript manquait auparavant cette fonctionnalité, nécessitant une concaténation de chaîne:

var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' + sound); 

Cela devient lourd avec des chaînes plus longues et entraîne souvent des erreurs de libellur. Le manque de cordes multilines de JavaScript complique encore les choses.

Modèle littéraux: une solution:

Les littéraux du modèle ES6 résolvent ces problèmes. Le backtick (`) permet la substitution d'expression et les chaînes multilines:

var animal = 'cow';
var sound = 'moo';

alert(`The animal is ${animal} and its sound is ${sound}`);

Le ${} Construct gère toute expression JavaScript, permettant les calculs et l'accès à la propriété des objets:

var output = `ten times two is ${10 * 2}`;

Les chaînes multilines sont désormais sans effort:

var list = `
- Buy Milk
- Be kind to Pandas
- Forget about Dre
`;

Modèles tagués:

Les littéraux du modèle peuvent être "marqués" avec une fonction, permettant la manipulation de chaîne personnalisée:

function urlify(str) {
  return encodeURIComponent(str);
}

urlify`http://example.com`;

Cette fonction reçoit la chaîne comme argument, permettant des opérations comme le codage d'URL.

Accès aux pièces de chaîne dans une fonction de balise:

Une fonction de balise reçoit à la fois les parties de chaîne et les expressions intégrées comme arguments distincts:

function tag(strings, values) {
  console.log(strings); // Array of string parts
  console.log(values);  // Array of embedded expressions
}

tag`you ${3 + 4} it`;

La propriété strings.raw fournit les pièces de chaîne brutes, y compris les séquences d'échappement.

Compatibilité du navigateur et détection des fonctionnalités:

Alors que la plupart des navigateurs modernes prennent en charge les littéraux du modèle, la transpilation ES6 (par exemple, en utilisant Babel) est nécessaire pour les navigateurs plus âgés. La détection des fonctionnalités garantit la compatibilité:

// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; 

Lire plus approfondie et ressources: (Liens omis pour la concision, mais le texte original incluait des liens vers divers articles sur les littéraux du modèle.)

Microsoft Web Development Series: (les détails sur les ressources de développement Web de Microsoft, y compris les outils et le matériel d'apprentissage, ont été inclus dans le texte d'origine mais omis ici par concision.)

Questions fréquemment posées: (Le texte d'origine contenait une section FAQ complète sur les littéraux du modèle, qui est omis ici en raison de contraintes de longueur.)

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!