JavaScript - Unicode

What is Unicode?

Unicode is a universal set of characters that contains a list of characters from the majority of languages, writing systems, etc. It provides a unique number for every character without focusing on programming language, platform, operating system, etc. Furthermore, it also includes punctuation, emojis, special characters, etc.

In short, the Unicode set contains unique numbers, each referring to a unique character, having the same meaning regardless of platform, operating system, etc.

Intuition behind Unicode

Before understanding unicode, let's understand the idea behind it. Can you answer the question of why are you able to read this tutorial? Well, because you know the meaning of the letters written. A reader (you) and writer both have the same comprehension of the English alphabetical letters; that's why you are able to read what the writer has written.

Similarly, computers don't understand the letters. For computers, letters are sequences of bits, and each sequence is mapped to a unique character that is called Unicode.

Now, let's understand Unicode in depth.

Unicode in JavaScript

JavaScript allows developers to use the Unicode characters in the string literals and source code. Developers need to use the escape notation (\u) to use the Unicode characters in JavaScript code.

Syntax

Users can follow the syntax below to use the Unicode characters in JavaScript.

const char = '\uxxxx';

In the above syntax, '\uxxxx' is a Unicode character. Here, 'xxxx' represents the hexadecimal characters, and /u' represents the escape notation.

Examples

Example: Unicode escape sequence

In the below example, we have used unicode escape sequence to print the "hello" message.

<html>
<body>
   <div>Using unicode escape sequence</div>
   <div id = "output"> </div>
   <script>
      let str = '\u0068\u0065\u006c\u006c\u006f'
      document.getElementById("output").innerHTML = str;
</script>
</body>
</html>

Output

Using unicode escape sequence
hello

Example: Using unicode characters in variable names

In the code below, we have used the two different Unicode characters as two different identifiers (variable names). In the output, you can observe the value of both identifiers.

<html>
<body>
   <div>Using unicode characters in variable names</div>
   <div id = "output"> </div>
   <script>
      // Using the Unicode characters in variable names
      let \u0061 = "Hello";
      let \u0062 = "World";
      document.getElementById("output").innerHTML = a + " " + b;
</script>
</body>
</html>

Output

Using unicode characters in variable names
Hello World

Example: Using the Unicode Characters in String

In this example, we have used the Unicode characters in the string literals. The output shows the special characters in the middle of the string.

<html>
<body>
   <div> Using the Unicode Characters in String </div>
   <div id = "output"> </div>
   <script>
    // Using the Unicode characters in the string
    let str = 'Hello \u00D8 \u00F8 World';
    document.getElementById("output").innerHTML = str;
</script>
</body>
</html>

Output

Using the Unicode Characters in String
Hello   World

Example: Using Unicode for non-BMP (Basic Multilingual Plane) characters

In the below example we have used unicode characters (code points) to show a non-BMP (basic multilingual plane) characters. We have demonstrate for a health worker.

<html>
<body>
   <div>showing person heath worker using unicode code point</div>
   <div id = "output"> </div>
   <script>
    // Showing emojis using the unicode characters
    const smileyFace = '\u{1F9D1}\u200D\u2695\uFE0F';
    document.getElementById("output").innerHTML = smileyFace;
</script>
</body>
</html>

Output

showing person heath worker using unicode code point

Example: Showing Emojies Using the Unicode Characters

In the code below, we have used the Unicode character to show the smiley face emoji.

<html>
<body>
   <div>Showing Emojies Using the Unicode Characters </div>
   <div id = "output"> </div>
   <script>
    // Showing emojis using the unicode characters
    const smileyFace = '\uD83D\uDE0A';
    document.getElementById("output").innerHTML = smileyFace;
</script>
</body>
</html>

Output

Showing Emojies Using the Unicode Characters

As we have seen, each Unicode character represents a unique character. In JavaScript, we can use Unicode characters with identifiers, string literals, etc.