如何在字符串中的特定位置插入变量?

2024-04-19

获取“模板”字符串并向其中插入信息的最佳方法是什么?

例如:

var templateString = "Hello {name1}, my name is {name2}";
var name1 = "Phil";
var name2 = "Amy";

是否有一个简单的名称可以在大括号括起来的变量名称所在的位置插入值?我需要它不仅适用于本示例(因此通过固定索引执行此操作不是一个选项),而且适用于任何给定的模板字符串和任何给定数量的变量。


你可以使用ES2015模板文字 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals。但是,变量应该在使用之前定义。

var name1 = "Phil";
var name2 = "Amy";
var templateString = `Hello ${name1}, my name is ${name2}`;

console.log(templateString);
document.body.innerHTML = templateString;

对于 ES2015 之前的版本,您可以使用正则表达式来替换变量。为此,可以创建具有搜索替换值的对象并String#replace https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter可以使用函数作为参数。

正则表达式\{([^}]*)\} https://regex101.com/r/eJ8iB4/1可用于匹配由大括号包围的字符串。

// Create an object of the key-value of search-replace
var obj = {
    name1: "Phil",
    name2: "Amy"
};

var templateString = "Hello {name1}, my name is {name2}";

// Use replace with callback function
var result = templateString.replace(/\{([^}]*)\}/g, function($0, $1) {
    return obj[$1] || $0; // If replacement found in object use that, else keep the string as it is
});

console.log(result);
document.body.innerHTML = result;

正则表达式解释:

  1. \{: Match {括号文字
  2. ([^}]*): 匹配除}零次或多次并将其添加到第一个捕获的组中。
  3. \}: Match }括号文字
  4. g:全球标志。匹配遵循此模式的所有可能的字符串。

Note: $0是完整的字符串,即{foo} and $1是第一个捕获的组foo.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在字符串中的特定位置插入变量? 的相关文章

随机推荐