如何在 ${variable} 的每个实例上拆分 ''(反引号字符串)

Question

所以我的问题是如何在每个变量实例上拆分带有backtick的字符串。

我尝试了${.*?}但这不起作用${variable}因为首先会被变量值替换，然后执行拆分函数。

知道怎么做吗？

let a = 2
let b = 4
let x = `Superman${a}hello${b}one more`.split(/${.*?}/g)
console.log(x)

一方面不是：我不想要将其包装为" 或 ' 的解决方案。

console.log('`Superman${a}hello${b}one more`'.split(/${.*?}/g))

Answer 1

该行执行后，无法获取原始模板字符串。但是，您可以使用标记函数/标记模板文本来获取字符串的各个部分，包括替换值：

function Test() {
  console.log(arguments)
  return arguments.length - 1
}
let a = 2
let b = 4
let c = Test `Superman${a}hello${b}one more`
console.log(`This template string has ${c} substituted values`)

Answer 2

为了澄清我对原始问题的评论，这里有一个默认模板文字函数的作用示例：

function defaultTemplateLiteralFn(strs, ...args) {
  return strs.map((str, idx) => str+(args[idx]||'')).join('');
}
const test = "special test";
const a = 10;
const b = 432;
console.log(`This is a ${test}. "${a}+${b}=${a+b}"`)
console.log(defaultTemplateLiteralFn`This is a ${test}. "${a}+${b}=${a+b}"`)

当您使用标记模板时(IE：您不提供处理模板文字的函数(，该语言提供了一个默认函数，该函数执行类似于我在上面的函数defaultTemplateLiteralFn中所做的操作。它返回字符串与值的组合部分。

示例函数获取字符串的每个部分，并在字符串之后放置适当的值。如果没有值，则使用空白字符串。

Answer 3

我所做的一种方法是使用模板文字。 我已经看到这在一个名为styled-components的库中使用，该库允许我们使用JS编写CSS。

如果有

的话，很想看看其他方法？

function splitOnVariable(str, age){
  // first argument to function will always be array of strings provided in input string.
  return str
}
let a = 1;
let b = 2;
console.log(splitOnVariable`hello${a} break me on variable${b} !!!`)