How do I interpolate variable values in the javascript or typescript string?

Question

Variables File:

export class VariableSettings { public static string_value: string = 'vikas/${id}/data'; }

Other File.

import {VariableSettings} from './variables'; getData(id:string ){ console.log(`${VariableSettings.string_value}`, `${id}`); // it prints vikas/${id}/data abcd11123 }`

Now I want the result like that "vikas/abcd11123/data". So how can I inject the id in that string.

Any suggestion regarding the same will be appreciated.

Thanks

I think it is complicated, but instead of interpolling string why not just pass a function like: string_value (id) {return `vikas/${id}/data`}. In your case, it needs another treatment like using regex to match ${id} — Radonirina Maminiaina
– Radonirina Maminiaina, Commented May 7, 2018 at 6:42

Titian Cernicova-Dragomir · Accepted Answer · 2018-05-07 06:53:22Z

To use interpolated strings you need to use the `` string separator as you do in your second snippet. If you already used a non interpolated string to hold the value of your setting, there is no way you can then interpolate it using the interpolation feature (you could use a regex to perform replacement but that is a bit messy).

The simplest solution is to make the field a function and have id as a parameter

export class VariableSettings { public static USER_BOOKINGS = (id: number) => `vikas/${id}/data`; } console.log(`${VariableSettings.USER_BOOKINGS(10)}`); console.log(VariableSettings.USER_BOOKINGS(10)); // Or no interpolation at call site, not needed anymore if you just need the single value

The USER_BOOKINGS will now be a function that takes as arguments the parameters needed to construct the string. This way the parameters needed for the strings are clear and type-safe.

public static string_value: string = (id: string) => vikas/${id}/data; It throws error Type '(id: string) => string' is not assignable to type 'string'.
@VIKASKOHLI it's no longer a string, it's a function that returns a string. Remove the :string it is not necessary, type will be inferred based on assigned arrow function
Ok. I will mark this as an answer. Thanks for your valuable time

Lia · Accepted Answer · 2018-05-07 06:43:35Z

you can try:

public static string_value: string = 'vikas/id/data'; let re = /id/gi; let newstr = `${VariableSettings.USER_BOOKINGS}`.replace(re, `${id}`); console.log(newstr);

I don't want to use any regex pattern for that. I just want to do interpolation

Omkar Jadhav · Accepted Answer · 2018-05-08 07:28:19Z

1

 export class VariableSettings { id:number; public static string_value: string; constructor(){ this.id = 123456 VariableSettings.string_value = `vikas/${this.id}/data`; } ngOnInit() { console.log(VariableSettings.string_value); } }