Angular+TypeScript中如何用常量标签实现动态值？

不用外部库的话，有几种比拆分拼接、基础%s替换更高效且易维护的原生实现方式，按推荐度排序：

1. ES6模板字符串（灵活直观） #

直接在标签常量中使用模板字符串语法的占位符，通过动态函数渲染，既保留常量的集中管理，又支持动态注入值：

// 集中管理标签常量
const LABELS = {
  DYNAMIC_ITEM_COUNT: 'This label has ${count} dynamic values'
};

// 安全的模板渲染函数（避免直接eval的风险）
const renderTemplate = (templateStr, data) => {
  const keys = Object.keys(data);
  return new Function(...keys, `return \`${templateStr}\``)(...Object.values(data));
};

// 使用示例
const currentCount = 1;
const displayLabel = renderTemplate(LABELS.DYNAMIC_ITEM_COUNT, { count: currentCount });
// 输出："This label has 1 dynamic values"

优点：语法清晰，支持多变量、表达式（比如${count + 1}），无需关心参数顺序；缺点：若模板字符串来自不可信源需谨慎，但内部常量无风险。

2. 命名占位符+正则替换（安全可控） #

用{变量名}作为占位符，结合正则批量替换，比%s更易读，且避免参数顺序错误：

const LABELS = {
  DYNAMIC_ITEM_COUNT: 'This label has {count} dynamic values'
};

// 通用替换函数
const replacePlaceholders = (template, replacements) => {
  return template.replace(/\{(\w+)\}/g, (match, key) => {
    return replacements.hasOwnProperty(key) ? replacements[key] : match;
  });
};

// 使用示例
const displayLabel = replacePlaceholders(LABELS.DYNAMIC_ITEM_COUNT, { count: 1 });

优点：完全无eval风险，占位符语义明确，支持多变量扩展；适合需要严格控制替换逻辑的场景。

3. 优化版%s占位符方案（兼容原有思路） #

对你最初设想的%s方案做扩展，支持多参数自动替换，无需手动拼接：

const LABELS = {
  DYNAMIC_ITEM_COUNT: 'This label has %s dynamic values, total %s items'
};

// 格式化函数
const formatWithPlaceholders = (template, ...args) => {
  let argIndex = 0;
  return template.replace(/%s/g, () => args[argIndex++] ?? '%s');
};

// 使用示例
const displayLabel = formatWithPlaceholders(LABELS.DYNAMIC_ITEM_COUNT, 1, 5);
// 输出："This label has 1 dynamic values, total 5 items"

优点：兼容你原有的思路，实现简单；缺点：参数需严格对应占位符顺序，多变量时易出错。

内容的提问来源于stack exchange，提问作者Steve Chacko