Comment puis-je convertir une chaîne normale en un modèle littéral dans ES6 JavaScript sans utiliser « eval » ou « new Function » ?

Conversion d'une chaîne en chaîne de modèle avec ES6

En JavaScript, les chaînes de modèle vous permettent d'incorporer des expressions et des variables directement dans des chaînes, fournissant une syntaxe concise et lisible. Cependant, que se passe-t-il si vous souhaitez créer une chaîne modèle à partir d’une chaîne non modèle existante ? Cette question explore la possibilité de réaliser cette conversion sans utiliser de techniques de génération de code dynamique telles que eval ou new Function.

La solution fournie exploite les capacités d'interpolation de chaînes d'ES6 avec une fonction d'interpolation personnalisée. Cette fonction prend un objet contenant les paramètres du modèle et génère dynamiquement une chaîne de modèle à l'aide d'un littéral de modèle JavaScript.

Voici comment fonctionne la solution :

String.prototype.interpolate = function(params) {
  const names = Object.keys(params);
  const vals = Object.values(params);
  return new Function(...names, `return \`${this}\`;`)(...vals);
}

La fonction d'interpolation est ajoutée en tant que fonction personnalisée méthode prototype à l’objet String. Il accepte un objet de paires clé-valeur représentant les paramètres du modèle.

const template = 'Example text: ${text}';
const result = template.interpolate({
  text: 'Foo Boo'
});

Ici, nous appliquons la fonction d'interpolation à notre chaîne de modèle, en passant un objet avec le texte du paramètre défini sur « Foo Boo ». La fonction crée une chaîne de modèle en utilisant un modèle littéral JavaScript avec des espaces réservés pour les valeurs des paramètres.

console.log(result);

Enfin, nous enregistrons le résultat sur la console, qui devrait afficher :

Example text: Foo Boo

Cette solution vous permet de convertir dynamiquement une chaîne ordinaire en chaîne modèle, vous permettant de profiter de l'expressivité et de la lisibilité offertes par les chaînes modèles dans votre code JavaScript.

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!