javascript - 使用 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() 但没有用

标签： javascriptnpmspecial-characters

Answer 1

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

这是我用来在分叉代码盒中处理查询字符串的逻辑片段。为了方便，我使用了函数式组件，但同样的逻辑也可以用在基于类的组件中。

// 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]);

演示