如何在 ${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/tagged 模板文字来获取字符串的各个部分，包括替换值：

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

我做过的一种方法是使用模板文字。我已经看到这是在一个名为 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} !!!`)

Answer 3

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

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}"`)

当您使用标记模板时（即：您不提供处理模板文字的函数）该语言提供了一个默认函数，其功能与我在函数中所做的类似 defaultTemplateLiteralFn多于。它 returns 字符串的组合部分与值。

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

如何在 ${variable} 的每个实例上拆分``（反引号字符串）

How to split ``(Backtick string) on each instance of ${variable}

javascript

string

backticks