如何在此自定义 javascript 函数中使用链接而不是字符串？

Question

我有一个辅助函数，可以用提供的参数替换字符串中的参数 -

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!

作为链接（不是纯文本）

我试过

const outputText = formatString(str, linkText);

但由于

formatString

函数只接受字符串作为输入，我得到一个错误。

Answer 1

那可没那么容易。

最难的部分是将字符串

input

拆分为字符串和链接列表，并可能确定单个

param

应该是链接还是普通文本。

formatString

需要导出一个 DOM 节点，或者一个 DOM 节点数组，而不是一个字符串。

但是调用

formatString

的代码也需要能够处理DOM节点，所以仅仅修复

formatString

是不够的。

创建 DOM 链接的快速（不完整）示例：

function formatString( input, ...params ){
    const result = [];
    for( let i = 0; i < params.length; ++i ){
        if( shouldBeLink ){
            const element = document.createElement('a');
            element.appendChild( document.createTextNode( params[i] ))
            result.push( element );
        } else if( ... ){
        ...
    }

    return result;
}

为了完整起见：React 还允许您将 HTML 代码直接写入元素（包括链接），但那很危险，您不应该这样做。这就是为什么它被称为'dangerouslySetInnerHTML'.