DEV Community

Some Useful JavaScript String Methods You May Not Know About

John Au-Yeung on January 06, 2020

Subscribe to my email list now at http://jauyeung.net/subscribe/ Follow me on Twitter at https://twitter.com/AuMayeung Many more articles at http...
Collapse
 
stephenmirving profile image
Stephen Irving

I feel like a good way to improve this article would have been linking to the MDN documentation for each method. Also, in the first method you discuss, normalize, you do not explain the parameters at all. Explaining why you pass 'NFC' and what the other acceptable forms are and the differences between them would've been good.

All in all though it is a good article and I am impressed at how fast you are churning them out since I started following you. Very productive!

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks. That's not a bad idea

Collapse
 
stephenmirving profile image
Stephen Irving • Edited

I also wanted to say that there really is no reason I can think of to ever use the String constructor new String('...') over a string primitive. The valueOf method is pretty much only for use internally by JavaScript, and is rarely if ever used in explicitly in production code. I don't think it is a good idea to have an example using the String constructor without also explaining why they most likely will never/should never use it.

Collapse
 
aumayeung profile image
John Au-Yeung

100 percent agree with that.

A string constructed with the constructor has type object which is confusing.

There is no benefit and its tricks people

Collapse
 
apsillers profile image
Andrew Sillers • Edited

A thorough overview!

I did want to point out that .split does not know how to use an array of strings as separators. Your example works because any object passed as a first argument to .split is converted to a string first. As it happens, the stringified form of [' '] is ' ', so this works, but as soon as you add a second element to the array, you would get very different results -- for example, ['a', 'b'] stringifies to the three-character delimiter 'a,b'.

A few other bug fixes:

  • the chickens-to-ducks example doesn't actually show the replacement in its output
  • the .split example with a regex incorrectly escapes the \d, which isn't necessary in a regex literal (but would be needed in a string argument to the new RegExp constructor)

^ this is actually a very interesting use of a regex split, because normally the sequence captured by the regex is not included in the output array. However, because you use capture-group parentheses in your regex -- (\d) instead of \d -- the capture-group sequence is spliced into the output array.

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks for looking at the examples.

I'll check them later.

Collapse
 
robinscodeongit profile image
robin

Thanks for this helpful article,
some of these methods I never used till now, so I had to try them out immediately :-)

but since I tried your examples noticed some small mistakes in the comments within your source code which might confuse people
In .padStart and .padEnd your comment says the string was padded with abcdef instead of 123456 in the third example of both.

And after replacing chicken with duck, it still says chicken in the comment

But really thanks for the article

Regards

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks for reading and catching those typos.

I'll fix them.

Collapse
 
leeroy profile image
Lee-Roy

If you haven't tried quokka out it can make these types of examples read a bit cleaner, I didn't know you could use regex in split! Thanks for the info

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks so much for reading!

Collapse
 
sujankh22371674 profile image
Sujan Khadka

It's been almost one year of using js on my projects but i barely used or seen some of the above js methods. You better explain with understanding example.

Thank you!

Collapse
 
benheimberg profile image
BenHeimberg

Hey!

In the String Repeat function there is a typo.

A is not defined, therefore it should be: const hello5 = hello.repeat(5);

Cherrs.

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks for catching that. I'll fix this.