javascript - js占位符 - js字符串格式化




使用占位符和替换对象格式化JavaScript字符串? (7)

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

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

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

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

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

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


与现代浏览器一样,新版Chrome / Firefox支持占位符,类似于C样式函数printf()

占位符:

  • %s字符串。
  • %d%i整数。
  • %f浮点数。
  • %o对象超链接。

例如

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

顺便说一句, 看看输出:

  • 在Chrome中,使用快捷键Ctrl + Shift + JF12打开开发人员工具。
  • 在Firefox中,使用快捷键Ctrl + Shift + K打开开发人员工具。 (不要使用F12 ,这将打开不再维护的Firebug ,其控制台选项卡不会显示消息)

@Update - nodejs支持

似乎nodejs不支持%f ,而是可以在nodejs中使用%d 。 使用%d数字将打印为浮点数,而不仅仅是整数。


作为一个简单的例子:

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

输出是:

杰克今年40岁


只需使用.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%"]);


您可以使用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团队


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

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/http://jsfiddle.net/jfriend00/DyCwk/


这是通过在运行时动态使用es6模板文字来实现此目的的另一种方法。

const str = 'My name is ${name} and my age is ${age}.'
const obj = {name:'Simon', age:'33'}


const result = new Function('const {' + Object.keys(obj).join(',') + '} = this.obj;return `' + str + '`').call({obj})

document.body.innerHTML = result





string-formatting