Nerd For Tech
Published in

Nerd For Tech

Basics of Javascript · String · fromCodePoint() (method)

This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.

Hello my dear newbs. Today, we will be talking about a method that was introduced in the ECMAScript 2015 version. But because browser vendors take forever to actually implement standards from many years ago, this one can be considered as quite a new one. So without further ado, let’s get to it.

This method is a static method, just like its predecessor from the previous article. Its job is to return a string created by using the specified sequence of code points. Since this is the newer and improved version of the fromCharCode() method, it can do pretty much the same thing, but also something extra.

Let’s see how it works in example 1.

// 'X' -> 88 or 0x58
// 'x' -> 120 or 0x78
// single unicode value
String.fromCodePoint(88) // X
String.fromCodePoint(0x58) // X
// multiple unicode values at once
String.fromCharCode(120, 88, 120) // xXx
String.fromCharCode(0x78, 0x58, 0x78) // xXx

So as you can see, I can create single character or multiple characters at once using their unicode code point values. Any number format is fine, but mostly you will want to use decimal or hexadecimal format for the convenience.

One of the news in this method is RangeError, which is thrown if the argument is not 0 or a positive integer number.

Following values will throw RangeError:

  • any string value that is not single white space character
  • constants: Infinity, undefined, NaN
  • negative integer numbers
  • non-integer numbers (floats, scientific notations, …)

Let’s see some of them in example 2.

try {
String.fromCodePoint("X").charCodeAt()
}
catch(e) {
console.log("ERROR: " + e); // Invalid code point NaN
}

String.fromCodePoint(true).charCodeAt() // 1
String.fromCodePoint(false).charCodeAt() // 0
String.fromCodePoint(null).charCodeAt() // 0

try {
String.fromCodePoint({}).charCodeAt()
}
catch(e) {
console.log("ERROR: " + e); // Invalid code point NaN
}

try {
String.fromCodePoint([1,2]).charCodeAt()
}
catch(e) {
console.log("ERROR: " + e); // Invalid code point NaN
}

Also a string, an object and an array will cause RangeError to be thrown. Strangely enough, the null constant is accepted as zero. The same happens with boolean value false. True is interpreted as one.

All in all, the fromCharCode() method was much more forgiving in this department. But that’s the direction Javascript is heading and we can either accept it or leave.

The last example will show that we can use this method just like fromCharCode() method, but at the same time, it can do much much more thanks to the fact that it can process code points as well.

// '臘' -> 63782 or 0xF926 or \uf926
//
// '🙂' -> 55357 + 56898 or 0xD83D + 0xDE42 or \uD83D\uDE42
// '🙂' -> 128578 or 0x1F642

// '臘' -> 63782 or 0xF926 or \uf926
String.fromCodePoint(63782)); // 臘
String.fromCodePoint(0xF926)); // 臘
"\uf926" // 臘

// '🙂' -> 55357 + 56898 or 0xD83D + 0xDE42 or \uD83D\uDE42
String.fromCodePoint(55357, 56898) // 🙂
String.fromCodePoint(0xD83D, 0xDE42) // 🙂
"\uD83D\uDE42" // 🙂


// '🙂' -> 128578 or 0x1F642 or \u1F642
String.fromCodePoint(128578) // 🙂
String.fromCodePoint(0x1F642) // 🙂

// TRY IT YOURSELF :)
// '🤦' -> 55358 + 56614 or 0xD83E + 0xDD26 or \uD83E\uDD26
// '🤦' -> 129318 or 0x1F926 or \u1F926

First section of example 3 shows that for the characters from Base Multilingual Plane, nothing changes. Oh, if you forgot, those are all characters that can fit into one code unit, or in other words, the ones with unicode value less than 65536.

Just like in the first section, the second section shows how to do things using code unit value, only this time with emoji that consists of two code units.

Truly interesting stuff starts with the third section. Each character has its numeric unicode value and this value can be represented by a single code point. So this means, if we know the code point value, we can directly use that and not care about surrogate code units at all.

Only limitation is that if you want to use “\u” you’ll have to stick with code units. Javascript accepts this kind of notation only for writing code units and if you use it on values bigger than 65536 or FFFF in hexadecimal format, it will simply ignore extra digits.

Okay, that’s it for the fromCodePoint() method.

As always thank you so much for your attention and see you soon in the next article.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

An Introduction to Hooks in React (useState)

Learn GatsbyJS by creating a tourism site -20

How to add Bootstrap in Next.js

How to add Bootstrap 5 CSS in Next.js

Improving passbolt security with distroless containers

Iterating over an HTML Collection in JavaScript

Context API a different approach to have a global state

Bypass Angular Interceptors with request metadata

9 JavaScript Hacks Nobody Talks About

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jakub Korch

Jakub Korch

Web enthusiast, programmer, husband and a father. Wannabe entrepreneur. You name it.

More from Medium

Why You Should Learn JavaScript Even in 2022

JavaScript closures and strict notation

“==” vs “===” in JavaScript

Getting comfortable with promises in JavaScript