如何让自定义formatString函数支持插入链接而非纯字符串参数？

我有一个用于替换字符串中参数的辅助函数：

type FormatStringParameter = string | number;

/**
 * Temporary function to replace params in a string with the params provided
 *
 * @param input The string that has params i.e. {0}, {1}...
 * @param params An array of strings representing the params
 */
export function formatString(input: string, ...params: FormatStringParameter[]): string {
  if (params && params.length) {
    for (let i = 0; i < params.length; ++i) {
      input = input && input.replace(`{${i}}`, params[i] as string);
    }
  }

  return input;
}

现有变量：

const str = "Hello World! {0}"
const linkText = "Click Here!"

我想用formatString生成文本“Hello World! Click Here!”，其中“Click Here!”是链接而非纯文本，但直接传入linkText只能得到纯文本，该怎么解决？

解决方案1：直接传入预构造的HTML链接字符串 #

原函数的参数类型已经支持string，所以你可以提前把链接的HTML代码拼接成字符串，直接传入即可：

// 替换成你的目标链接地址
const targetUrl = "https://your-target-url.com";
// 构造带链接的HTML字符串
const linkHtml = `<a href="${targetUrl}">${linkText}</a>`;
// 调用函数替换参数
const outputText = formatString(str, linkHtml);

之后在渲染时，需要确保你的前端环境支持解析HTML内容：

• React中使用dangerouslySetInnerHTML={{ __html: outputText }}
• Vue中使用v-html="outputText"
• 原生JS中可以用element.innerHTML = outputText

解决方案2：修改函数增强灵活性（可选） #

如果需要更安全的替换逻辑（比如避免XSS，或者支持全局替换），可以重构函数，让它支持更灵活的参数类型：

// 扩展参数类型，支持函数返回替换内容
type FormatStringParameter = string | number | ((match: string) => string);

export function formatString(input: string, ...params: FormatStringParameter[]): string {
  if (!input || !params.length) return input;

  for (let i = 0; i < params.length; ++i) {
    // 使用全局正则替换所有匹配的{0}、{1}等
    input = input.replace(new RegExp(`{${i}}`, 'g'), (match) => {
      if (typeof params[i] === 'function') {
        return params[i](match);
      }
      return String(params[i]);
    });
  }

  return input;
}

// 使用方式：传入函数生成链接内容
const outputText = formatString(str, () => {
  const targetUrl = "https://your-target-url.com";
  return `<a href="${targetUrl}">${linkText}</a>`;
});

这种方式不仅能解决链接问题，还能处理同一参数多次出现的全局替换场景，逻辑也更健壮。

内容的提问来源于stack exchange，提问作者azrael v