Share
ES6 est l'avenir de JavaScript et il est déjà là. Il s’agit d’une spécification achevée, qui apporte de nombreuses fonctionnalités requises par un langage pour rester compétitif avec les besoins du Web. Tout dans ES6 n'est pas pour vous, et dans cette petite série d'articles, je montrerai des fonctionnalités très pratiques et déjà utilisables..
Si vous regardez le code JavaScript que j'ai écrit, vous constaterez que j'utilise toujours des guillemets simples pour définir des chaînes au lieu de guillemets doubles. JavaScript est OK avec l'un ou l'autre - les deux exemples suivants font exactement la même chose:
var animal = "vache"; var animal = 'vache';
La raison pour laquelle je préfère les guillemets simples est que, tout d'abord, cela facilite l'assemblage des chaînes HTML avec les attributs correctement cités:
// avec des guillemets simples, il n'est pas nécessaire // d'échapper les guillemets autour de la valeur de la classe var but = ''; // c'est une erreur de syntaxe: var but = ""; // cela fonctionne: var but ="";
Le seul moment où vous devez vous échapper, c'est lorsque vous utilisez une citation unique dans votre code HTML, ce qui devrait être une occasion très rare. La seule chose à laquelle je peux penser est JavaScript ou CSS en ligne, ce qui signifie que vous êtes très susceptible de faire quelque chose de louche ou de désespéré pour votre balisage. Même dans vos textes, vous feriez probablement mieux de ne pas utiliser une citation mais la plus agréable typographiquement..
De plus, HTML est suffisamment tolérant pour omettre les guillemets ou pour utiliser des guillemets simples autour d'un attribut, mais je préfère créer un balisage lisible pour les humains plutôt que de compter sur le pardon d'un analyseur. Nous avons rendu le parseur HTML5 indulgent, car les gens avaient écrit des balises terribles dans le passé, pas comme une excuse pour continuer à le faire..
J'ai assez souffert dans les jours DHTML de document.write, créant un document dans un jeu de cadres dans une nouvelle fenêtre contextuelle et d'autres abominations, pour ne plus jamais utiliser le caractère d'échappement. Parfois, nous avions besoin de triples, et c'était même avant que nous ayons codé les couleurs dans nos éditeurs. C'était le bordel.
Une autre raison pour laquelle je préfère les guillemets simples est que j’ai écrit beaucoup de PHP à mon époque pour les très grands sites Web où les performances comptaient beaucoup. En PHP, il y a une différence entre les guillemets simples et doubles. Les chaînes entre guillemets simples ne comportent aucune substitution, contrairement aux chaînes à guillemets doubles. Cela signifiait à l'époque de PHP 3 et 4 que l'utilisation de guillemets simples était beaucoup plus rapide, car l'analyseur n'avait pas à parcourir la chaîne pour substituer des valeurs. Voici un exemple de ce que cela signifie:
L'animal est $ animal et son son est $ son echo "L'animal est $ animal et son son est $ son"; // => L'animal est une vache et son son est moo?>
JavaScript n'avait pas cette substitution, c'est pourquoi nous avons dû concaténer des chaînes pour obtenir le même résultat. C’est assez difficile à manier, car il faut tout le temps sauter entre guillemets.
Accentsconagua
var animal = 'vache'; var sound = 'moo'; alerte ('l'animal est' + animal + 'et son son est' + son); // => "L'animal est une vache et son son est moo"Cela devient vraiment compliqué avec des chaînes plus longues et plus complexes et en particulier lorsque nous assemblons beaucoup de HTML. Et très probablement, vous finirez tôt ou tard par vous plaindre avec votre outil anti-peluche de se plaindre de la fin des espaces après un + à la fin d'une ligne. Ceci est basé sur le problème que JavaScript n'a pas de chaînes multilignes:
// cela ne fonctionne pas var list = '
Afin de résoudre le problème de la gestion des chaînes et de la concaténation en JavaScript, nous avons fait ce que nous faisons toujours: nous avons écrit une bibliothèque. Il existe de nombreuses bibliothèques de modèles HTML, avec Moustache.js probablement. Tous ces éléments suivent leur propre syntaxe non normalisée et fonctionnent dans cet état d'esprit. C'est un peu comme dire que vous écrivez votre contenu dans Markdown, puis que vous réalisez qu'il y a beaucoup d'idées différentes sur ce que signifie «Markdown»..
Avec l'avènement de l'ES6 et sa standardisation, nous pouvons nous réjouir car JavaScript a maintenant un nouvel enfant en matière de gestion des chaînes: Template Strings. La prise en charge des chaînes de modèles dans les navigateurs actuels est encourageante: Chrome 44+, Firefox 38+, Microsoft Edge et WebKit sont tous intégrés. Malheureusement, le safari n’est pas, mais il va y arriver.
Le génie des modèles de chaînes réside dans le fait qu’il utilise un nouveau délimiteur de chaîne, qui n’est utilisé ni en HTML ni dans les textes normaux: le backtick (').
En utilisant celui-ci, nous avons maintenant la substitution d'expression de chaîne en JavaScript:
var animal = 'vache'; var sound = 'moo'; alert ('l'animal est $ animal et son son est $ son'); // => "L'animal est une vache et son son est moo" le $ construct peut prendre n'importe quelle expression JavaScript qui renvoie une valeur. Vous pouvez, par exemple, effectuer des calculs ou accéder aux propriétés d'un objet:
var out = 'dix fois deux au total est $ 10 * 2'; // => "dix fois deux font 20" var animal = nom: 'vache', ilk: 'bovin', avant: 'moo', dos: 'lait', alert ('Le $ animal.name est du type animal.ilk, une extrémité correspond au $ animal.front, l’autre au $ animal.back '); // => / * La vache est de race bovine, une extrémité est pour le meuh, l'autre pour le lait * / Ce dernier exemple montre également que les chaînes multilignes ne sont plus un problème..
Une autre chose que vous pouvez faire avec les chaînes de modèle consiste à les ajouter au début avec une balise, qui est le nom d'une fonction appelée qui obtient la chaîne en tant que paramètre. Par exemple, vous pouvez encoder la chaîne résultante pour les URL sans avoir à recourir à l’horrible nom encodeURIComponent tout le temps.
fonction urlify (str) return encodeURIComponent (str); urlify 'http://beedogs.com'; // => "http% 3A% 2F% 2Fbeedogs.com" urlify 'woah $ £ $% ^ ^ $ "'; // =>" woah% 24% C2% A3% 24% 25% C2% A3% 5E % 24% 22 "// imbrication fonctionne également: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Cela fonctionne, mais repose sur la coercition implicite de chaîne à chaîne. Le paramètre envoyé à la fonction n'est pas une chaîne, mais un tableau de chaînes et de valeurs. Si utilisé de la manière que je montre ici, il est converti en chaîne pour plus de commodité, mais la méthode correcte consiste à accéder directement aux membres du tableau..
Dans la fonction de balise, vous pouvez non seulement obtenir la chaîne complète, mais également ses parties..
balise de fonction (chaînes, valeurs) console.log (chaînes); console.log (valeurs); console.log (chaînes [1]); tag 'vous $ 3 + 4 il'; / * => Tableau ["vous", "ça"] 7 ça * /
Il existe également un tableau des chaînes brutes qui vous sont fournies, ce qui signifie que vous obtenez tous les caractères de la chaîne, y compris les caractères de contrôle. Disons, par exemple, que vous ajoutez un saut de ligne avec \ n. Vous obtiendrez le double espace blanc dans la chaîne, mais le \ n caractères dans les chaînes brutes:
balise de fonction (chaînes, valeurs) console.log (chaînes); console.log (valeurs); console.log (chaînes [1]); console.log (string.raw [1]); tag 'vous $ 3 + 4 \ nit'; / * => Tableau ["vous", "ça"] 7 ça \ nit * /
Les chaînes de modèles font partie de ces astucieux petits gains dans ES6 qui peuvent être utilisés maintenant. Si vous devez prendre en charge des navigateurs plus anciens, vous pouvez bien sûr copier votre ES6 à ES5. vous pouvez effectuer un test de fonctionnalité pour la prise en charge des modèles de chaîne à l'aide d'une bibliothèque telle que featuretests.io ou avec le code suivant:
var templatestrings = false; try new Function ("'2 + 2'"); templatestrings = true; catch (err) templatestrings = false; if (templatestrings) //… Voici d'autres articles sur les chaînes de template:
Cet article fait partie de la série de projets de développement Web rédigés par des spécialistes de la technologie Microsoft sur l'apprentissage pratique de JavaScript, les projets open source et les meilleures pratiques d'interopérabilité, y compris le navigateur Microsoft Edge et le nouveau moteur de rendu EdgeHTML..
Nous vous encourageons à tester tous les navigateurs et périphériques, y compris Microsoft Edge - le navigateur par défaut pour Windows 10 - avec des outils gratuits sur dev.modern.IE:
Apprentissage technologique approfondi sur Microsoft Edge et la plate-forme Web auprès de nos ingénieurs et évangélistes:
Plus d'outils et de ressources multi-plateformes gratuits pour la plate-forme Web:
