很多情况下在写一些小页面时想用一些字符串模板，但Javascript又不原生支持字符串模板，只好用一些第三方库，但引用第三方库的缺点在于很多功能的冗余， 浪费前端加载时间和流量，甚至会造成命名冲突等问题。 其实有时候的需求很简单，不需要很高级的字符串模板功能，只需要像'My Name is {name}. Hello {herName}这样的线性替换就行。其实这个需求实现起来非常容易，四行代码就搞定了。如下：

JS 字符串模板替换函数

/**
 * @tpl {String} 字符串模板
 * @data {Object} 模板数据
 * @return {String} 目标字符串
 * @example
 *      template('My Name is {name}. Hello {herName}', {name: 'Lilei', herName: 'Hanmeimei'})
 *      template('print Student: {0}, {1}, {2}. {0} won the game!', ['Lilei', 'Hanmeimei', 9523])
 */
function template (tpl, data) {
    return tpl.replace(/{(w*)}/g, function (m, key) {
        return data.hasOwnProperty(key) ? data[key] : '';
    });
}

妈妈再也不用担心我用+来拼接字符串啦 :-)

再进一步，我们可以拓展Javascript的原生String对象，让其支持template方法。如下：

/*
 * 判断template方法是否已经存在，不存在就用自己定义的方法
 */
if (!String.prototype.template) {
    String.prototype.template = function (data) {
        return this.replace(/{(w*)}/g, function (m, key) {
            return data.hasOwnProperty(key) ? data[key] : '';
        });
    }    
}

偷懒到结束。