实现一个 template 方法

输入两个参数:

  1. str: '哈哈,我是{{name}},今年{{age}}岁啦。'
  2. data: { name: 'mazey', age: 18 }

执行 template(str, data)

输出: '哈哈,我是mazey,今年18岁啦。'

const str = '哈哈,我是{{name}},今年{{age}}岁啦。'
const data = {
    name: 'mazey',
    age: 18
}

function template (str, data) {
   str = str.replace(/\{\{(.+?)\}\}/g, (...rest) => {
        console.log(rest) // ["{{name}}", "name", 5, "哈哈,我是{{name}},今年{{age}}岁啦。"]
        return data[rest[1]]
    })
    return str
}

console.log(template(str, data)) // 哈哈,我是mazey,今年18岁啦。

技巧: replace 第二个参数除了可以是替换的字符串,还可以指定一个函数作为参数,该函数的返回值将替换第一个参数匹配到的结果。

function reFunc (...rest) {
    console.log(`匹配的子串: ${rest[0]}`)
    console.log(`匹配的 $1: ${rest[1]}`)
    console.log(`匹配的偏移量: ${rest[2]}`)
    console.log(`被匹配的原字符串: ${rest[3]}`)
    return `[[抓到 ${rest[1]}]]`
}

let str = '小薰今年升{{高中}},有三个{{好朋友}}'
str = str.replace(/\{\{(.+?)\}\}/g, reFunc)
console.log(str) // 小薰今年升[[抓到 高中]],有三个[[抓到 好朋友]]
// 匹配的子串: {{高中}}
// 匹配的 $1: 高中
// 匹配的偏移量: 5
// 被匹配的原字符串: 小薰今年升{{高中}},有三个{{好朋友}}

发表评论

您的电子邮箱地址不会被公开。