Generate constant labels with dynamic values in angular with typescript?

I have to convert all the labels in my application to label constants.

The HTML in some areas have dynamic content like this This label has '1' dynamic values where the '1' is subject to change according to the component or a different application state.

I would have to add 2 different values in my labelConstants like this

label_1: 'This label has \'',

label_2: '\' dynamic values'

and generate the string like this

let string = LabelConst.label_1 + '1' + LabelConst.label_2;

An idea I had for solving this was to add a value in the label constant like this

label_1: 'This label has '%s' dynamic values'

and then while generating the value for the labels use a common function to replace the %s value like this in my typescript code,

let requiredLabel = insertDynamicValues(LabelConst.label_1, '3');

where the function insertDynamicValues() would replace %s in the label constant and return This label has '3' dynamic values.

Is there a more efficient/better way to do this (without external libraries)?

I have this approach:

'The label has %0 dynamic value'

and TypeScript code:

  public static replacePlaceholder(text: string, words: string[], placeholder: string = '%'): string {
const replaceValue = (result: string, value: string, i: number): string => {
  return result.replace(`${placeholder}${i}`, String(value));
};

return words.reduce(replaceValue, text);

}

That way I can use multiple placeholders in one string. Example:

`We have %0 apples and %1 oranges`

You could use a library like mustache (https://www.npmjs.com/package/mustache) or handlebars (https://www.npmjs.com/package/handlebars) for this, although I am not sure if this is an overkill for your use case. This basically depends on how complex the labels should be.