تحويل أحرف اليونيكود في React: دليل عملي لتحسين تجربة المستخدم

في عالم تطوير الويب، يظهر تعامل مع النصوص وتحويل الأحرف اليونيكود إلى الأحرف المفهومة بوضوح كمهمة أساسية. يمكن تحقيق هذا الأمر باستخدام تقنيات JavaScript وReact. دعونا نستكشف سويًا كيف يمكن تنفيذ هذا العمل بشكل فعّال.

أولاً وقبل كل شيء، يجب علينا أن ندرك أن النص الذي يحتوي على أحرف يونيكود مثل “\u00f3” يمكن تحويله بسهولة باستخدام دالة مدمجة في JavaScript تُعرف باسم decodeURIComponent. هذه الدالة تفك تشفير النص المُرَمَّز بترميز يونيكود.

لتحقيق هذا في React، يمكننا استخدام دالة dangerouslySetInnerHTML لتحويل النص اليونيكود إلى HTML فعلي. إليك مثال على كيفية تحقيق ذلك:

jsxCopy code
import React from 'react';

const UnicodeDecoder = () => {
  const unicodeString = '\\u00f3';
  const decodedString = decodeURIComponent(JSON.parse(`"${unicodeString}"`));

  return (
    <div>
      <p>
        I have a string in unicode that I need to convert. I need to render the
        string with {unicodeString} to {decodedString}. This is an example, it
        should happen with all other types of characters, \u00e1, \u00ed,
        \u00fa...
      p>

      <p>
        I have the following basic code:{' '}
        <a
          href="https://jsfiddle.net/dddf7o70/"
          target="_blank"
          rel="noreferrer"
        >
          https://jsfiddle.net/dddf7o70/
        a>
      p>

      <p>
        I need to convert:
      p>

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

      <p>
        into:
      p>

      <pre>
        <code>{decodedString}code>
      pre>
    div>
  );
};

export default UnicodeDecoder;

في هذا المثال، تم استخدام decodeURIComponent لتحويل النص \u00f3 إلى “ó”. يتم عرض النص المفكوك تشفيره في العنصر باستخدام React.