JavaScript实现类似Python的字符串占位符.format()

问题描述

使用jQuery向页面添加元素时需要拼接HTML，当HTML中含有"之类的信息时，手动拼接极度容易出错，若有类似Python的.format()函数就方便多了

print('<button type="submit" value={}>今天</button>'.format('"/inform{"time": "今天"}"'))
# <button type="submit" value="/inform{"time": "今天"}">今天</button>

解决方案

1. 定义函数，String.prototype.format
2. 添加转义字符

代码

/*字符串占位符*/
String.prototype.format = function () {
    if (arguments.length == 0) return this;
    var param = arguments[0];
    var s = this;
    if (typeof (param) == 'object') {
        for (var key in param)
            s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
        return s;
    } else {
        for (var i = 0; i < arguments.length; i++)
            s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
        return s;
    }
};

或使用模板字符串，变量名写在 ${} 中

let name = "Mike";
let age = 27;
let info = `My Name is ${name}, I am ${age + 1} years old next year.`;
console.log(info);
// My Name is Mike, I am 28 years old next year.

效果

输入

'<button type="submit" value={0}>今天</button>'.format('"/inform{"time": "今天"}"')

输出

"<button type="submit" value="/inform{"time": "今天"}">今天</button>"

参考文献

1. JS字符串使用占位符轻松实现拼接
2. ES6 教程 | 菜鸟教程