React JavaScript显示/解码Unicode字符

Question

React JavaScript显示/解码Unicode字符

41

我有一个Unicode字符串需要转换。我需要将带有\u00f3的字符串呈现为ó。这是一个示例，对于所有其他类型的字符，如á，í，ú等都应该发生同样的情况。

我有以下基本代码： https://jsfiddle.net/dddf7o70/ 我需要转换

<Hello name="Informaci\u00f3n" />

进入

Información

- barracuda

为什么？React和JavaScript可以很好地处理Unicode，为什么不直接输入您需要输入的内容？（文档建议仅使用\u...符号作为普遍更安全的选项，但现在，Unicode已经变得非常普遍安全）。 - Mike 'Pomax' Kamermans

2

我需要将其转换的原因是因为有人向我提供了这个字符串：Informaci\u00f3n - barracuda

所以这个问题与React无关，它是“如何在JavaScript中将带有\u...表示法的字符串转换为普通字符串”？因为https://jsfiddle.net/dddf7o70/3/（具有真实字符串内容）在React中运行良好。你是怎么得到那些字符串的？看起来很不可能得到还没有解析`\u....`标记的字符串... - Mike 'Pomax' Kamermans

4个回答

24

如果你必须使用字符串，并且其中实际上包含字面上带有十六进制数字的字符\u，而不是真正的字母，请将它们转换为数字，然后使用String.fromCharCode()将这些数字转换为真正的字母。我们可以使用带有处理程序函数的正则表达式替换来完成此操作：

如果您需要处理包含十六进制数字的字符串，而非实际字母的字符串，可以先将其转换成数字，再使用 String.fromCharCode() 将这些数字转换为实际字母。可以通过正则表达式替换并使用处理函数来实现：

// put this in whatever utility library file you have:
export function convertUnicode(input) {
  return input.replace(/\\+u([0-9a-fA-F]{4})/g, (a,b) =>
    String.fromCharCode(parseInt(b, 16)));
}

然后在您的组件中：

import { convertUnicode } from "...your util lib...";

function Hello(props) {
   const name = convertUnicode(props.name);
   return <div>Hello {name}</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name="Informaci\\u00f3n"/>);

Fiddle：https://jsfiddle.net/shdye3pq/

- Mike 'Pomax' Kamermans

4

如果要在render()以及JSX中使用Unicode编写，你只需：

<div>{'First \u00b7 Second'}</div>

, or

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

如果您要使用库和其他字体，请确保首先导入您的字体，确保您使用 font-family: myFont（即 "Font Awesome 5 Free"）。并确保您使用的Unicode是准确的。

- T.Woody

2

问题标题涉及React Unicode问题，有时只需要这个meta标签：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
</html>

- kungfooman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zerkms · Accepted Answer

只需将其作为JS字符串传递：

<Hello name={'Informaci\u00f3n'} />

不需要进行任何手动处理（这很容易出错）。

示例代码： https://jsfiddle.net/dddf7o70/5/