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

Question

So my question is how i can split the a string with backtick on each instance of variable.

I tried with \${.*?} but this will not work because ${variable} will be replaced by variable values first and than the split function will be executed.

Any idea how to do it ?

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

console.log(x)

On side not: I don't want a solution with wrapping it to " or '.

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

I think by the time split runs the string will have already be replaced with variables. — adiga, Feb 07 '19 at 17:38
You could use a tagged template literal https://stackoverflow.com/a/53084271 — adiga, Feb 07 '19 at 17:41
One way is to not use the back-tick if you want to split it and use the back-tick if you want to have the string correctly generated..I guess the question is... Why do you want to do this? — Intervalia, Feb 07 '19 at 17:44
@adiga yeah i know that and i already mentioned that in comment — Code Maniac, Feb 07 '19 at 17:45
@Intervalia well i am curious to learn js. so just messing around things, i have done using back-ticks and already posted as answer too, but wanted to see if there are more ways of doing it. — Code Maniac, Feb 07 '19 at 17:52
Got it. You could consider that *all* back-ticks call a template literal function. The default function, if you don't supply one, just concatenates the string parts and values and returns the combined string. If you supply your own function then you control what is done with the parts of the string and the values. But you can not manipulate the pre-processed back-tick string as a single string. — Intervalia, Feb 07 '19 at 18:07

tkausl · Answer 1 · 2019-02-07T17:51:20.387

After the line executes, there is no way to get the original template string. However, you can use a tag function/tagged template literal to get the parts of the string, including the substitution values:

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

score 1 · Accepted Answer · answered Feb 07 '19 at 18:35

To clarify my comment to the original question here is an example of what the default Template Literal Function does:

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

When you use a tagged template (IE: You don't provide a function to handle the template literal) The the language provides a default function that does something similar to what I do in my function defaultTemplateLiteralFn above. It returns the combined parts of the string with the values.

The example function takes each part of the string and puts the appropriate value after the string. If there is no value then it uses a blank string.

Code Maniac · Answer 3 · 2019-02-07T17:50:28.667

One way i have done is using template literal. i have seen this is being used in a in a library called styled-components which allows us to write css with js.

Would love to see other methods if there are any ?

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

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

3 Answers3