如何在JavaScript中将字符串插值模板存入变量并调用？

当然可以实现类似效果，但原生模板字符串是立即求值的，直接写const myStr = http://website.com/${0}/${1}``会得到字符串http://website.com/0/1，没法当成函数调用。下面给你几种可行的实现方式：

方法一：用箭头函数返回模板字符串 #

直接把模板字符串包装成函数，参数对应插值内容：

const myStr = (a, b) => `http://website.com/${a}/${b}`;
console.log(myStr('abc','def'));
// 输出：http://website.com/abc/def

方法二：用剩余参数模拟索引式调用 #

如果想保留你示例里${0}、${1}的索引思路，可以用剩余参数接收所有传入的值，再通过索引取值：

const myStr = (...args) => `http://website.com/${args[0]}/${args[1]}`;
console.log(myStr('abc','def'));
// 输出：http://website.com/abc/def

方法三：用正则替换实现动态模板 #

如果需要更灵活的模板（比如模板字符串提前定义好），可以用正则匹配${n}格式的占位符，替换成对应参数：

// 先定义模板字符串
const template = 'http://website.com/${0}/${1}';
// 包装成调用函数
const myStr = (...args) => template.replace(/\${(\d+)}/g, (match, index) => args[index]);

console.log(myStr('abc','def'));
// 输出：http://website.com/abc/def

内容的提问来源于stack exchange，提问作者Raniere Soares