面試官：你能實(shí)現(xiàn)一個(gè) JavaScript 模板引擎嗎？
作者：程序員Sunday
with? 關(guān)鍵字屬于被棄用的語(yǔ)法（但是 Vue3 的源碼中依然使用到了 with），但是在這里依然可以實(shí)現(xiàn)對(duì)應(yīng)的功能。
Hello，大家好，我是 Sunday。
這個(gè)問(wèn)題具體是這樣的：請(qǐng)為字符串增加一個(gè) render 方法，可以實(shí)現(xiàn)如下最終的打印。
const template = '我是 ${name}, 年齡 ${age} 歲'
const employee = {
name: 'Sunday',
age: 18
}
const renderStr = template.render(employee)
// 輸出成字符串
console.log(renderStr)
// '我是 Sunday, 年齡 18 歲'乍一看，這不就是 模板引擎 嗎？合著這是讓我手寫(xiě)一個(gè) `` 的簡(jiǎn)易版出來(lái)啊。
不過(guò)還好，既然是簡(jiǎn)易版那就并不復(fù)雜。一共有三種方式，咱們來(lái)看看吧！
01：利用正則表達(dá)式
使用正則表達(dá)式應(yīng)該是大多數(shù)的同學(xué)第一時(shí)間想到的方案了。
只需要通過(guò)正則替換 ${name} 和 ${age} 就可以直接實(shí)現(xiàn)對(duì)應(yīng)的功能。
String.prototype.render = function (obj) {
const template = this
const variableRegex = /\$\{([^${}]+)\}/g
template.replace(variableRegex, ($0, variable) => {
// 打印對(duì)應(yīng)的屬性
console.log(variable)
})
}
const template = '我是 ${name}, 年齡 ${age} 歲'
template.render()通過(guò)以上代碼我們可以直接拿到 ${name} 之中的屬性，所以接下來(lái)咱們就只需要完成替換即可。
// 為 String 對(duì)象的原型添加一個(gè)名為 render 的方法
String.prototype.render = function (obj) {
// 保存調(diào)用該方法的字符串實(shí)例
const template = this;
// 定義一個(gè)正則表達(dá)式，用于匹配 ${variableName} 格式的變量
const variableRegex = /\$\{([^${}]+)\}/g;
// 定義一個(gè)函數(shù)，用于根據(jù)傳入的對(duì)象獲取變量的值
const getVariableValue = (variable) => {
// 將變量名按照 '.' 分隔成數(shù)組，例如 'user.name' 會(huì)分隔成 ['user', 'name']
variable = variable.split('.');
// 初始化 variableValue，使其指向傳入的對(duì)象 obj
let variableValue = obj;
// 遍歷分隔后的變量名數(shù)組，逐層獲取嵌套屬性的值
while (variable.length) {
// 取出數(shù)組的第一個(gè)元素，并獲取對(duì)應(yīng)的屬性值
variableValue = variableValue[variable.shift()];
}
// 返回最終獲取到的變量值
return variableValue;
};
// 使用 replace 方法替換模板字符串中的變量
// $0 是匹配到的整個(gè)字符串，例如 ${name}
// variable 是捕獲組中的變量名，例如 name
const renderStr = template.replace(variableRegex, ($0, variable) => {
// 獲取變量值并替換模板中的變量
return getVariableValue(variable);
});
// 返回替換后的字符串
return renderStr;
};02：使用 eval
eval() 函數(shù)會(huì)將傳入的字符串當(dāng)做 JavaScript 代碼進(jìn)行執(zhí)行。
比如：
const employee = {
name: 'Sunday',
age: 18
}
const { name } = employee
console.log(name) // Sunday這樣的代碼使用 eval 方法可以這么寫(xiě)：
const employee = {
name: 'Sunday',
age: 18
}
// 注意：必須是 var
eval('var { name } = employee')
console.log(name) // Sunday這樣的好處在于 可以根據(jù) obj 的 key 動(dòng)態(tài)的生成新的變量。
因此，就可以得到如下代碼：
// 為 String 對(duì)象的原型添加一個(gè)名為 render 的方法
String.prototype.render = function (obj) {
// 保存調(diào)用該方法的字符串實(shí)例
const template = this;
// 使用 eval 動(dòng)態(tài)解構(gòu) obj 對(duì)象，將其屬性名作為變量名，并賦值給這些變量
// 例如，obj = { name: 'Sunday', age: 18}
// 生成的代碼類似于：var { name, age, job } = obj;
eval(`var {${Object.keys(obj).join(',')}} = obj`);
// 使用模板字符串替換變量，并生成最終的字符串
// 這里的 eval 用于解析和執(zhí)行模板字符串，其中包含 obj 對(duì)象的屬性值
// 例如，template = '我是 ${name}, 年齡 ${age} 歲'
// 生成的代碼類似于：`我是 ${name}, 年齡 ${age} 歲`
const renderStr = eval('`' + template + '`');
// 返回替換后的字符串
return renderStr;
}03：with 關(guān)鍵字
with 語(yǔ)句擴(kuò)展一個(gè)語(yǔ)句的作用域鏈
with 關(guān)鍵字屬于被棄用的語(yǔ)法（但是 Vue3 的源碼中依然使用到了 with），但是在這里依然可以實(shí)現(xiàn)對(duì)應(yīng)的功能。
圖片
我們可以通過(guò)以下示例來(lái)演示 with 的作用：
const employee = {
name: 'Sunday',
age: 18
}
with (employee) {
console.log(name, age) // Sunday 18
}基于這個(gè)特性，使用 with 實(shí)現(xiàn)這個(gè)功能就非常簡(jiǎn)單了。
String.prototype.render = function (obj) {
with(obj) {
// this 實(shí)例。即：我是 ${name}, 年齡 ${age} 歲
// 兩邊加上 ` ` 即可利用 ES6 的模板運(yùn)算符實(shí)現(xiàn)此功能
return eval('`' + this + '`')
}
}責(zé)任編輯：武曉燕
來(lái)源：
程序員Sunday
