DEV Community

10 Awesome JavaScript String Tips You Might Not Know About

Kai on December 17, 2020

This post was originally published at kais.blog. Let's move your learning forward together! Follow me on Twitter for your daily dose of developer ...

Read full post

fullstackcoder • Dec 17 '20 • Edited

I like this post although a struggle I had recently was that padStart and padEnd are not supported on IE.

I tried to find polyfill but there is not an official one so I ended up in a custom solution.

Kai • Dec 17 '20 • Edited

Thanks! Yeah, those quirks with different browsers... MDN references this polyfill for String#padStart and String#padEnd: github.com/behnammodi/polyfill/blo...

Karim Sabbagh • Oct 6 '23

Back when IE mattered

Tanaka • Dec 18 '20

Thanks for the great post! Is there a way to easily unstringify text with a JavaScript? A kind of opposite of the stringify function? eg. how to remove the quotation marks in a dictionary of key-value pairs like {"name":"Tim", "age": "22"}. In this case, removing them just from the age value?

Thanks for the great article again!

kamcio • Dec 19 '20

So you basically just want to convert string to a number?

const string = '22'
const stringToNumber = +string

console.log(stringToNumber)
// 22

John Doe • Dec 20 '20

Why does this work like this do you know?

Duy K. Bui • Dec 20 '20

Because + operator tells JavaScript to wrap both sides of it with Number(). Left side here is blank, so Number() gives you 0. Right side here is "22", so Number("22") gives you 22. Then + operator adds these 2 Numbers together and gives you 22.

That's a lazy way to convert a String to a Number.
The explicit equivalent way is const stringToNumber = Number(string).

However, if you need more fine-tuned control over the parsing of the string, consider using parseInt or parseFloat (which lets you parse number representation in bin, oct, hex, etc., not just dec)

Tanvir Shaikh • Dec 17 '20 • Edited

For point 6.
whats the difference between
word.substr(1) vs word.splice(1) ?

Kai • Dec 17 '20

Note, splice is used for modifying arrays. I think you mean slice.

At first glance, there is no difference between word.substr(1) and word.slice(1). Both return a substring of word. However, their signature differs. The second parameter to substr is length. So, using substr(1, 5) means, take 5 characters starting at 1. In contrast, slice(1, 5) means take the characters between index 1 (inclusive) and index 5 (exclusive).

Besides, there's also a substring method. This behaves pretty much like slice. It takes a starting index and an optional ending index.

All three methods are valid ways to extract a substring. They may differ a bit in performance. Yet, the difference is more or less negligible. Choose what you find adequate.

Tanvir Shaikh • Dec 18 '20

Got it, Thanks Kai it's very helpful

qq449245884 • Dec 19 '20

Hello, may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Kai • Dec 21 '20

Sure! I hope it's helpful for some developers in China :)