使用占位符和替换对象格式化JavaScript字符串？

Question

我有一个字符串说: My Name is %NAME% and my age is %AGE%.

%XXX%是占位符.我们需要从对象替换值.

对象看起来像: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

我需要解析对象并用相应的值替换字符串.所以最终输出将是:

我的名字是迈克,我的年龄是26岁.

整个过程必须使用纯javascript或jquery完成.

Answer 1

原始问题的要求显然无法受益于字符串插值,因为它似乎是任意替换键的运行时处理.

但是,如果您只需要进行字符串插值,则可以使用:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

注意分隔字符串的反引号,它们是必需的.

对于符合特定OP要求的答案,您可以使用String.prototype.replace()替换.

以下代码将处理所有匹配,而不是没有替换的触摸(只要您的替换值是所有字符串,如果没有,请参见下文).

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle.

如果您的某些替换不是字符串,请确保它们首先存在于对象中.如果您有一个类似示例的格式,即用百分号包裹,您可以使用in运算符来实现此目的.

jsFiddle.

但是,如果您的格式没有特殊格式,即任何字符串,并且您的替换对象没有null原型,请使用Object.prototype.hasOwnProperty(),除非您可以保证您的潜在替换子字符串都不会与原型上的属性名称冲突.

jsFiddle.

否则,如果你的替换字符串是'hasOwnProperty',你会得到一个混乱的字符串.

jsFiddle.

作为一个侧面说明,你应该叫replacements的Object,而不是一个Array.

Answer 2

如何使用ES6模板文字？

var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string

有关模板文字的更多信息......

Answer 3

您可以使用JQuery(jquery.validate.js)使其轻松工作.

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

或者,如果您只想使用该功能,您可以定义该功能,并使用它

function format(source, params) {
    $.each(params,function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    })
    return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));

归功于jquery.validate.js团队

Answer 4

只需使用 replace()

var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);

Answer 5

目前，Javascript 中仍然没有针对此行为的本机解决方案。标记模板是相关的，但不要解决它。

这里有一个带有替换对象的alex 解决方案的重构。

该解决方案使用箭头函数和类似的占位符语法作为模板文字中的本机 Javascript插值（{}而不是%%）。此外，无需%在替换名称中包含分隔符( )。

有两种口味（三种随更新）：描述性、减少、优雅减少与组。

描述性解决方案：

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(
  /{\w+}/g,
  placeholderWithDelimiters => {
    const placeholderWithoutDelimiters = placeholderWithDelimiters.substring(
      1,
      placeholderWithDelimiters.length - 1,
    );
    const stringReplacement = replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters;
    return stringReplacement;
  },
);

console.log(string);

减少的解决方案：

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(/{\w+}/g, placeholder =>
  replacements[placeholder.substring(1, placeholder.length - 1)] || placeholder
);

console.log(string);

更新 2020-12-10

正如@Kade 在评论中所建议的那样，优雅的减少组解决方案：

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(
  /{(\w+)}/g, 
  (placeholderWithDelimiters, placeholderWithoutDelimiters) =>
    replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters
);

console.log(string);

更新 2021-01-21

支持空字符串作为替换，正如@Jesper 在评论中所建议的：

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '',
};

const string = stringWithPlaceholders.replace(
  /{(\w+)}/g, 
  (placeholderWithDelimiters, placeholderWithoutDelimiters) =>
  replacements.hasOwnProperty(placeholderWithoutDelimiters) ? 
    replacements[placeholderWithoutDelimiters] : placeholderWithDelimiters
);

console.log(string);

Answer 6

与现代浏览器一样,新版Chrome/Firefox支持占位符,类似于C风格功能printf().

占位符:

• %s 串.
• %d,%i整数.
• %f 浮点数.
• %o 对象超链接.

例如

console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);

顺便说一句,看看输出:

• 在Chrome中,使用快捷方式Ctrl + Shift + J或F12打开开发人员工具.
• 在Firefox中,使用快捷方式Ctrl + Shift + K打开开发人员工具.(不要使用F12哪个将打开Firebug,不再维护,其控制台选项卡将不显示消息).

@Update - nodejs支持

似乎nodejs不支持%f,而是可以%d在nodejs中使用.与%d号码将被打印为浮点数,而不只是整数.

Answer 7

您可以使用这样的自定义替换功能：

var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};

function substitute(str, data) {
    var output = str.replace(/%[^%]+%/g, function(match) {
        if (match in data) {
            return(data[match]);
        } else {
            return("");
        }
    });
    return(output);
}

var output = substitute(str, replaceData);

你可以在这里看到它的工作：http : //jsfiddle.net/jfriend00/DyCwk/。

Answer 8

这可以让你做到这一点

NPM： https: //www.npmjs.com/package/stringinject

GitHub： https: //github.com/tjcafferkey/stringinject

通过执行以下操作：

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

// My username is tjcafferkey on Git