自实现字符串模板
问题介绍:
给定一个字符串和一个对象,要求使用对象中的属性值替换字符串中对应位置的字符
var str = 'I name is {{name}},I from {{from}}'
var obj = {
from: 'beijing',
name: 'Tom',
}
function template(str,obj){
}
//输出:I name is Tome,I from beijing
思路:
先使用正则表达式对str中包含的
{{属性名}}
进行查找,使用while循环当还存在时就继续,否则当不存在时输出null会跳出while循环通过正则获取第一个需要替换的
{{属性名}}
之后通过for in 循环obj中的属性名,当获取相同属性名时,进行替换
template = (str, obj) => {
while(str.match(/\{[\{\w\}]+\}/)){
// 匹配带{{}}的字段
var regexStr = str.match(/\{[\{\w\}]+\}/)[0]
for(var key in obj){
//判断{{}}中间的内容
if (regexStr.match(/\w+(?=\})/)[0] == key) {
str=str.replace(/\{[\{\w\}]+\}/, obj[key])
}
}
}
return str
}
var str = 'I name is {{name}},I from {{from}}'
var obj = {
from: 'beijing',
name: 'Tom',
}
template(str, obj)
这时我们发现,一个功能里使用了两次循环和一次if判断,在字符串长度足够长,并且需要替换属性足够多的情况下,这效率简直不忍直视,并且这正则表达式的写法也丑到飞起
那么有没有一种效率高,还能避免这种正则表达式的简单写法呢
思路:
通过RegExp动态生成的正则表达式,循环obj中的属性名,在字符串中对应查找,并且进行替换
function template(str, obj) {
for (var key in obj) {
var reg = new RegExp("{{" + key + "}}")
str = str.replace(reg, obj[key])
}
return str
}