๐ŸŽŠ Welcome to my NEW website ๐ŸŽŠ

# Split String Using ES6 Spread

Convert a string to an array of characters using the spread syntax!

It goes through each character in the โ€œpizzaโ€ string and assigns it to our new โ€œsplitPizzaโ€ array. Very cool ๐Ÿคฉ

const pizza = 'pizza';

// Old way
const slicedPizza = pizza.split('');
console.log(slicedPizza) // [ 'p', 'i', 'z', 'z', 'a' ]

// ES6: using Spread
const slicedPizza2 = [...pizza];
console.log(slicedPizza2) // [ 'p', 'i', 'z', 'z', 'a' ]

// ES6: using Array.from
const slicedPizza3 = Array.from(pizza);
console.log(slicedPizza3); // [ 'p', 'i', 'z', 'z', 'a' ]

# Example

# Capitalizing String

Here's a good use case as to why you would want to split strings.

const name = "samantha";

const capitalizeName = [
  
  // Capitalize the first character of the array
  ...name[0].toUpperCase(),
  
  // Ignore the first character and return the return the rest of the array
  ...name.slice(1)
]
// Join the array to make a single string
.join(''); 

console.log(capitalizeName); // Samantha

# Community Suggestions

# Split doesn't work with Emojis

Not only is using spread more concise, but there are consequences to using split when multi-byte #UTF8 chars are involved such as emoji characters.

// Using Split
"pizza๐Ÿ•".split(''); // [ 'p', 'i', 'z', 'z', 'a', '๏ฟฝ', '๏ฟฝ' ]

// Using Spread
[..."pizza๐Ÿ•"]; // [ 'p', 'i', 'z', 'z', 'a', '๐Ÿ•' ]

// Using Array.from
Array.from("pizza๐Ÿ•"); // [ 'p', 'i', 'z', 'z', 'a', '๐Ÿ•' ]

Thanks: @donavon

# Explaining Emoji

And the reason why split spits out garbled results is because the '๐Ÿ•' emoji has a length of 2. It is a surrogate pair of unicode code points. With the split method, it splits this pair apart, hence resulting in 2 giberish results.

'๐Ÿ•'.length; // 2

// The pizza emoji is made up of a surrogate pair 
'๐Ÿ•'.charCodeAt(0); // 55356
'๐Ÿ•'.charCodeAt(1); // 57173

// The code in its individual form result in an odd return
String.fromCharCode(55356); // '๏ฟฝ'
String.fromCharCode(57173); // '๏ฟฝ'

// But in its combined form, it gives you back the pizze emoji
String.fromCharCode(55356, 57173); // '๐Ÿ•'

Thanks: Aleksandar H

# Resources

  • https://stackoverflow.com/questions/44900175/why-does-spread-syntax-convert-my-string-into-an-array
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
  • https://www.contentful.com/blog/2016/12/06/unicode-javascript-and-the-emoji-family/
  • https://dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/
  • https://medium.com/@giltayar/iterating-over-emoji-characters-the-es6-way-f06e4589516

Related Tidbits