使用 npm latinize 翻译特殊字符不能动态工作

Question

我正在使用 latinize 将德语的特殊字符翻译成英语，只有当我在单引号或双引号内传递字符串时它们模块才起作用，但当我将它们存储在变量中传递时它们不起作用。

import latinize from 'latinize';

并且在渲染中，我对此进行了调试，它工作正常，

console.log('render', latinize('VfL Osnabrück'))

还有当我通过我的

let tag_name = 'VfL Osnabrück';
console.log('render', latinize('VfL Osnabrück'))

它会再次正常工作，但是当我从我的 api 中得到 tag_name 时，它就不能正常工作了。完整代码如下

let tag_parsing = sub_category_id.split('%20');
let tag_string = '';
for (let i = 0; i < tag_parsing.length; i++) {
    tag_parsing[i];
    // tag_parsing[0] == Vlf
    // tag_parsing[1] == Osnabrück

    console.log('latinized text', tag_parsing[i]);
    tag_string += ' ' + tag_parsing[i]
}

输出

拉丁化文本的输出==> Osnabr%C3%BCck

引号内的拉丁化文本输出 ==> Osnabruck

我也尝试使用 .toString() 但没有用

Answer 1

我认为您尝试处理来自 URL 的查询字符串的方式可能有问题。

这是我用来在分叉的代码箱中处理您的查询字符串的逻辑片段。为了方便起见，我使用了功能组件，但可以在基于 class 的组件中使用相同的逻辑。

// get the search string
const { search } = useLocation();

const [latinizedValue, setLatinizedValue] = React.useState("");

React.useEffect(() => {
  console.log({ search });

  // create search params object
  const newParams = new URLSearchParams(search);

  const key = newParams.get("key");
  const value = newParams.get("value")?.trim();

  console.log("Param", key, `"${value}"`);
  console.log("latinize param:", `"${latinize(value)}"`);

  setLatinizedValue(latinize(value));
}, [search]);

演示

Answer 2

我使用的字体系列不包含特殊的德语字符，最后我更改了支持德语特殊字符的字体系列，一切顺利，拉丁化也可以正常工作。

使用 npm latinize 翻译特殊字符不能动态工作

Translate Special Characters with npm latinize is not working dynamically

javascript

special-characters

npm

演示