很多情况下在写一些小页面时想用一些字符串模板,但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] : '';
});
}
}
偷懒到结束。