How do I print Unicode characters in the console using JavaScript?


In this article, we will learn how to print Unicode characters in the console using JavaScript. No matter the platform, the software, or the language, Unicode assigns a unique number to each character.

Most writing systems' characters are defined by the universal character set known as Unicode, which also assigns each character a unique number (code point). A unit of data called an abstract character (or character) is used to organize, manage, or represent textual data.

Most of the modern languages' letters, punctuation marks, diacritical markings, mathematical symbols, technical symbols, arrows, emoji, and other symbols are all included in Unicode.

These are different types of Unicode characters are printed in the console.

Using Escape Sequences

To represent code units based on code point numbers in strings, escape sequences are utilized. Three escape types are available in JavaScript, one of which debuted in ECMAScript 2015.

Syntax

Users can follow the below syntax to print escape sequences.

\u<hex>

Parameters

Here\u is a prefix followed by a hexadecimal number <hex> with a fixed length of 4 digits. For example,'\u0051' (symbol 'Q') or '\u222B' (integral symbol '∫'.

Example

The below example demonstrates how to print the Unicode characters – escape sequences in console. The variable s stores a certain Unicode value for space and the letter ‘U’. Then it prints that to the console. Similarly, in the next lines we see the Unicode for happy face emoji and funny cat face emoji.

<head>
   <title> JavaScript Unicode </title>
</head>
<body>
   <h2> Using escape sequences in Unicode</h2>
   <script>
      const s = 'I\u0020learn \u0055nicode';
      console.log(s); // => 'I learn Unicode'
      document.write(s+" <br>");
      const s1 = 'Happy face \uD83D\uDE00';
      console.log(s1); // => 'Happy face 😀'
      document.write(s1+"<br> ");
      const s2 = 'Funny cat face \u{1F639}';
      console.log(s2);
      document.write(s2+"<br> ");
      document.write("<br>Please open the Console to see the above message in Console.")
   </script>
</body>
</html>

Here, the reader can observe how space, letters and emoji are printed using the Unicode characters.

Comparing Strings

In this approach, we will use the strings to check for Unicode characters. The evaluation of code units for a match in a string comparison will be the desired if the code units from the two strings are the same.

Consider comparing two displayed strings that have the same appearance but have distinct code unit sequences. Because strings that superficially appear to be equal are not equal in comparison, you can get an unexpected result.

Syntax

const a = '\u0068ell\u006F';

Example

Users can learn to perform the string comparison using Unicode characters. We insert "hello" and Unicode characters for 'H' and 'o'. The check is performed, and both strings are the same. Then we check for some other characters. When displayed, s1 and s2 have the same appearance, although they contain distinct code units. It occurs because the ç graphene can be built in one of two ways, one with U+00E7 Latin small letter c with cedilla and another with U+0063 Latin small letter c and U+0327 combining cedilla.

<html>
<head>
   <title> JavaScript Unicode </title>
</head>
<body>
   <h2> Using string comparison in Unicode </h2>
   <p> Please open the Console to see the above message in Console.</p>
   <script>
      const firstS = 'hello';
      const secondS = '\u0068ell\u006F';
      console.log(firstS === secondS); // => true
      document.write(firstS === secondS);
      const s1 = 'çavabien';
      const s2 = 'c\u0327a vabien';
      console.log(s1); // => 'çavabien'
      document.write("<br> "+s1+" <br> ");
      console.log(s2); // => 'çavabien'
      document.write(s2+" <br>");
      console.log(s1 === s2); // => false
      document.write(s1===s2)
   </script>
</body>
</html>

In the above output, users can observe that first a check between both strings is being performed. Then we see s1 and s2 are almost same but are different inserted for the cedilla so they are interpreted as different strings.

Using Unicode Characters in Variable & Function Names

In this tutorial we will see how to put Unicode characters in variable names.

Syntax

var f\u<hex>=’Hi’;

Example

In this example, we see two approaches, one to use Unicode characters as variable names and another to use Unicode characters as Function names. The variable name will be recognized as ‘foo’ and the function name is recognized as ‘fo’ which helps to print Unicode characters in the console.

<html>
<head>
   <title> JavaScript Unicode </title>
</head>
<body>
   <h2> Using Unicode characters for variable and function names</h2>
   <p> Please open the Console to see the above message in Console.</p>
   <script>
      var f\u006F\u006F = 'TutorialsPoint';
      console.log(foo);
      document.write(foo+" ");
      let x = f\u006F(2, 5);
      // Function is called, return value will end up in x
      function f\u006F(a, b) {
         return a * b; // Function returns the product of a and b
      }
      console.log(x);
      document.write(x);
   </script>
</body>
</html>

In this output, we see that the variable’s value is being printed and the function is being recognized as we use Unicode character to declare the variable and function names.

Conclusion

We have used three approaches to print Unicode characters in the console using JavaScript. First, we see how to print simple characters and escape sequences in console. Secondly, we see how to compare two strings and see whether all Unicode characters are same. Thirdly, we use Unicode characters in variable names and function names to check whether those will work in the same way as the conventional way. These approaches will be understandable and help the reader to learn Unicode characters in detail.

Updated on: 22-Jul-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements