Share
Bienvenue dans la deuxième partie de ma série sur ECMAScript 6! L’un de mes nouveaux standards Web préférés de Microsoft Edge, le nouveau moteur de rendu de navigateur que nous créons chez Microsoft, est le support complet qu’il offre pour ECMAScript 6. J’ai donc écrit cette série pour vous présenter certaines des choses intéressantes que vous pouvez faire. avec ECMAScript 6 lors de la rédaction d'applications volumineuses pour le Web.
Dans le premier versement, j'ai couvert la classe et l'héritage. Dans cet article, je vais me concentrer sur les chaînes de modèle basées sur mon expérience personnelle de création d'expressions incorporées..
Lorsque je travaille sur Babylon.js, je dois traiter le code des shaders qui peut être vu, pour des raisons de compréhension, comme un gros paquet de texte (qui ressemble à C)..
Vous pouvez trouver un exemple dans ce dépôt GitHub.
Le problème lorsque vous traitez avec un texte long en JavaScript est le retour à la ligne. Combien de fois as-tu écrit ce genre de chose?
var myTooLongString = "Il y a longtemps, dans une galaxie lointaine" + "lointain ..." + "C'est une période de guerre civile." + "Les vaisseaux spatiaux rebelles, frappant" + "depuis une base cachée, ont remporté" + "leur première victoire contre" + "le maléfique Empire galactique.";
Lorsque vous devez travailler avec des shaders de 200 lignes ou plus, cela devient rapidement une vraie douleur..
Heureusement, ECMAScript 6 est livré avec la nouvelle fonctionnalité de modèle de chaînes. Parmi d'autres merveilles, un modèle de chaîne supporte directement les chaînes multilignes:
var myTooLongString = 'Il y a longtemps, dans une galaxie très lointaine… C'est une période de guerre civile. Les vaisseaux spatiaux rebelles, frappant depuis une base cachée, ont remporté leur première victoire contre le mal empire galactique ';
Tous les caractères étant significatifs dans une chaîne de modèle, je ne peux pas ajouter d'espaces de début.
En tant que développeurs JavaScript, nous avons trois façons de définir des chaînes:
La prise en charge multiligne n’est pas la seule caractéristique des chaînes de modèles. En effet, vous pouvez également utiliser des chaînes de modèle pour substituer des espaces réservés avec des valeurs de variables, comme vous avez pu le faire avec printf en C / C ++ ou string.Format en C #:
Accentsconagua
var items = []; items.push ("banane"); items.push ("tomate"); items.push ("sabre laser"); total de var = 100,5; result.innerHTML = 'Vous avez $ items.length article (s) dans votre panier pour un total de $$ total';Ce code produit la sortie suivante:
Vous avez 3 article (s) dans votre panier pour un total de 100,55 €
Assez pratique, droite?
Rappelez-vous la manière ECMAScript 5:
result.innerHTML = "Vous avez" + items.length + "article (s) dans votre panier pour un total de $" + total;
La dernière étape de la spécification du modèle de chaîne consiste à ajouter une fonction personnalisée avant la chaîne elle-même pour créer une marqué modèle de chaîne:
var myUselessFunction = fonction (chaînes,… valeurs) var output = ""; pour (var index = 0; index < values.length; index++) output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myUselessFunction 'You have $items.length item(s) in your basket for a total of $$total';
La fonction ici est utilisée pour avoir accès à la fois à la partie chaîne constante et aux valeurs des variables évaluées.
Dans l'exemple précédent, les chaînes et les valeurs sont les suivantes:
Comme vous pouvez le constater, chaque valeur [n] est entourée de chaînes de constantes (chaînes [n] et chaînes [n + 1]).
Cela vous permet de contrôler comment la chaîne de sortie finale est construite. Dans mon exemple précédent, je ne reproduisais que le comportement de base des modèles de chaîne, mais nous pouvons aller plus loin et ajouter un traitement de qualité à votre chaîne..
Par exemple, voici un morceau de code pour bloquer les chaînes qui tentent d’injecter des éléments DOM personnalisés:
var items = []; items.push ("banane"); items.push ("tomate"); items.push ("sabre laser"); var total = "Essayer de détourner votre site
"; var myTagFunction = function (chaînes,… valeurs) var output =" "; pour (var index = 0; index < values.length; index++) var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) // Far more complex tests can be implemented here :) return "String analyzed and refused!"; output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myTagFunction 'You have $items.length item(s) in your basket for a total of $$total';Les chaînes de modèles étiquetés peuvent être utilisées pour beaucoup de choses comme la sécurité, la localisation, la création de votre propre langage spécifique à un domaine, etc..
Les fonctions de balises ont une option spéciale lors de l’accès aux constantes de chaînes: elles peuvent utiliser strings.raw pour obtenir les valeurs de chaîne non échappées. Par exemple, dans ce cas \ n ne sera pas vu comme un seul caractère mais en réalité deux: \ et n.
L'objectif principal est de vous permettre d'accéder à la chaîne telle qu'elle a été entrée:
var myRawFunction = function (chaînes,… valeurs) var output = ""; pour (var index = 0; index < values.length; index++) output += strings.raw[index] + values[index]; output += strings.raw[index] console.log(strings.length, values.length); return output; result.innerHTML = myRawFunction 'You have $items.length item(s) in your basket\n.For a total of $$total';
Ce code génère la sortie suivante:
Vous avez 3 article (s) dans votre panier \ n.Pour un total de 100.5 $
Vous pouvez également utiliser une nouvelle fonction de chaîne: String.raw (). Cette fonction est une fonction intégrée qui fait exactement ce que mon exemple précédent fait:
result.innerHTML = String.raw 'Vous avez $ items.length article (s) dans votre panier \ n.Pour un total de $$ total';
Microsoft Edge et les dernières versions de Chrome (41+), Opera (28+) et Firefox (35+) prennent en charge les chaînes de modèles et vous pouvez suivre le niveau de prise en charge globale d’ECMAScript 6 ici. Donc, si vous ciblez le Web moderne, il n'y a aucune raison de ne pas adopter les chaînes de modèles..
Pour obtenir une vue complète des nouvelles normes et fonctionnalités Web à venir dans Microsoft Edge, à l'instar de WebAudio, vous pouvez consulter la liste complète à l'adresse dev.modern.ie/platform/status..
Cela vous surprendra peut-être un peu, mais Microsoft propose un grand nombre d’apprentissage gratuit sur de nombreuses rubriques JavaScript open source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge. Découvrez moi-même:
Ou la série d'apprentissage de notre équipe:
Et quelques outils gratuits: Communauté Visual Studio, Azure Trial et outils de test multi-navigateurs pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
