JavaScript - Unicode: A Comprehensive Guide for Beginners

Hello there, aspiring coders! Today, we're going to embark on an exciting journey into the world of Unicode in JavaScript. Don't worry if you're new to programming – I'll be your friendly guide, and we'll take this step by step. So, grab a cup of coffee (or tea, if that's your thing), and let's dive in!

What is Unicode?

Imagine you're trying to write a letter to your pen pal in China, but your keyboard only has English letters. Frustrating, right? This is where Unicode comes to the rescue!

Unicode is like a magical dictionary that assigns a unique number (called a "code point") to every character in every language system in the world. It's not just about letters and numbers – it includes symbols, emojis, and even ancient scripts!

For example, the letter 'A' has the Unicode code point U+0041, while the Chinese character '中' (meaning "middle") has the code point U+4E2D.

Intuition behind Unicode

Think of Unicode as a universal language for computers. Before Unicode, different regions of the world used different encoding systems, which led to a lot of confusion and compatibility issues. It was like having a tower of Babel in the digital world!

Unicode solved this by creating a standardized system that can represent characters from all writing systems. It's like giving every character in every language a unique ID card that computers everywhere can recognize.

Unicode in JavaScript

Now, let's see how JavaScript handles Unicode. JavaScript uses UTF-16 encoding, which means it can directly represent the first 65,536 Unicode characters (also known as the Basic Multilingual Plane or BMP).

Here's a little table of methods JavaScript provides for working with Unicode:

Method	Description
String.fromCharCode()	Creates a string from Unicode values
String.fromCodePoint()	Creates a string from code points
charCodeAt()	Returns the Unicode value of a character
codePointAt()	Returns the code point of a character

Let's look at some examples to see these in action!

Examples

1. Creating a string from Unicode values

let heart = String.fromCharCode(9829);
console.log(heart); // ♥

In this example, we're using String.fromCharCode() to create a heart symbol. The number 9829 is the Unicode value for the black heart suit (♥). It's like telling JavaScript, "Hey, give me the character that has the ID card number 9829!"

2. Getting the Unicode value of a character

let str = "Hello, 世界!";
console.log(str.charCodeAt(7)); // 19990

Here, we're using charCodeAt() to get the Unicode value of the character at index 7 in our string (which is '世'). It's like asking, "What's the ID card number of the 8th character in this string?"

3. Working with characters outside the BMP

let emoji = "?";
console.log(emoji.codePointAt(0)); // 128640
console.log(String.fromCodePoint(128640)); // ?

For characters outside the Basic Multilingual Plane (like many emojis), we need to use codePointAt() and String.fromCodePoint(). In this example, we're working with the rocket emoji. It's like dealing with a special character that has a really high ID number!

4. Counting characters correctly

let text = "? Rainbow";
console.log(text.length); // 9
console.log([...text].length); // 8

This is a tricky one! JavaScript treats characters outside the BMP as two characters. So, the rainbow emoji (?) is counted as two characters. If we want to count it as one, we can use the spread operator (...) to split the string into an array of characters.

5. Unicode escape sequences

console.log("\u{1F600}"); // ?
console.log("\u{1F64B}\u{200D}\u{2640}\u{FE0F}"); // ?‍♀️

Unicode escape sequences allow us to represent Unicode characters in our code. It's like writing the ID card number instead of the actual character. The \u{...} syntax is used for all Unicode code points.

Conclusion

And there you have it, folks! We've taken a whirlwind tour of Unicode in JavaScript. From understanding what Unicode is, to seeing how JavaScript handles it, to playing with some cool examples – I hope you've enjoyed this journey as much as I have.

Remember, Unicode is what allows us to write software that can be used by people all over the world, in any language. It's a beautiful example of how technology can bring us together and break down barriers.

As you continue your coding journey, keep exploring and experimenting with Unicode. Try writing messages in different languages, or have fun with emojis in your code. The world of programming is vast and exciting, and Unicode is your passport to global communication!

Happy coding, and until next time – may your code be bug-free and your coffee be strong! ?☕

Credits: Image by storyset