Nested String Interpolation or Delaying String Interpolation

Question

I am creating functions containing strings that need interpolation:

let createPFunc = (string) => {
    return () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(`${string}`);
                resolve();
            }, 2000);
        })
    }
}
let f1 = createPFunc('String 1: ${string}');
let f2 = createPFunc('String 2: `${string}`');

f1(`search 1`).then(() => f2('search 2'))

What it prints is:

String 1: ${string}
String 2: `${string}`

I want it to print:

String 1: search 1
String 2: search 2

I tried different quoting variations, but can't find a combination that works.

How can I perform interpolation twice, or delay interpolation so ${string} is resolved when the function is called (instead of when the function is created)?

Why are you using promises here? What is the point of createPFunc? Why not just write const f1 = string => `String 1: ${string}`;? — Bergi
– Bergi, Commented Jun 22, 2021 at 22:07
"How can I perform interpolation twice" - you cannot. See also stackoverflow.com/questions/22607806/… — Bergi
– Bergi, Commented Jun 22, 2021 at 22:08
Take a look at this: stackoverflow.com/questions/30003353/… — Rodrigo Rodrigues
– Rodrigo Rodrigues, Commented Jun 22, 2021 at 22:09

Rodrigo Rodrigues · Accepted Answer · 2021-06-22 22:16:49Z

1

Take a look at this answer in another question to find details on how to defer the substitution of a string interpolation. I am using the defer function here for that.

You can achieve what you want by doing this:

    function defer([first, ...rest]) {
        return (...values) => rest.reduce((acc, str, i) => acc + values[i] + str, first);
    }
    
    var createPFunc = (template) => {
        return (string) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(template(string));
                    resolve();
                }, 2000);
            })
        }
    }
    
    var f1 = createPFunc(defer`String 1: ${'string'}`);
    var f2 = createPFunc(defer`String 2: ${'string'}`);
    
    f1(`search 1`).then(() => f2('search 2'))
    // result:
    // String 1: search 1
    // String 2: search 2

answered Jun 22, 2021 at 22:16

Rodrigo Rodrigues

8,6321 gold badge32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

Using 'string' as an interpolated value is confusing, since it's just ignored - the value has no significance. Better avoid that defer tag and just write createPFunc(string => `String 1: ${string}`).

Rodrigo Rodrigues Over a year ago

That is right, the argument is ignored in this case. It could easily be null or undefined (but needs to pass something, because of the syntax of es6 templates). I used the word string to make it more alike OP's original code, but yeah, that might confuse someone.

Collectives™ on Stack Overflow

Nested String Interpolation or Delaying String Interpolation

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related