Discussion on: JS Array Manipulation Quirks

View post

Good points! You could iterate through a string directly though with a for loop, accessing the character at each index!

function forEachChar(str, cb) {
   for (let i = 0; i < str.length; i++) {
      cb(str.charAt(i))
   }
}

Jen Chan • Dec 8 '19

Wow yesss! I didn't think to!

willsmart • Dec 8 '19 • Edited

As a rule I see charAt/charCodeAt/length for strings as useful optimisations in well-curated performance code and anti-patterns in typical code.

They are great if you know what's in the string (i.e. you made it or "sanitised" it to take all the interesting bits out), but can get you in trouble for arbitrary user input where at some stage some fool is going to try out some fancier unicode.

spreadem = s => {
  for (let i=0; i<s.length; i++) console.log(`Char at index ${i}: '${s.charAt(i)}'`); 
  console.log(`Spread graphemes: '${[...s].join("', '")}'`);
}

charAt works nicely in the usual case:

> spreadem("01234")
< Char at index 0: '0'
< Char at index 1: '1'
< Char at index 2: '2'
< Char at index 3: '3'
< Char at index 4: '4'
< Spread graphemes: '0', '1', '2', '3', '4'

But get's funky when multi-char graphemes exist:

> spreadem("𝟘𝟙𝟚𝟛𝟜")
< Char at index 0: '�'
< Char at index 1: '�'
< Char at index 2: '�'
< Char at index 3: '�'
< Char at index 4: '�'
< Char at index 5: '�'
< Char at index 6: '�'
< Char at index 7: '�'
< Char at index 8: '�'
< Char at index 9: '�'
< Spread graphemes: '𝟘', '𝟙', '𝟚', '𝟛', '𝟜'

(see speakingjs.com/es5/ch24.html for a bit of background)

Ryan Kahn (he/him) • Dec 8 '19

This is a really good point! Multi-character glyphs do mess with string iteration whether you split, spread, or loop. Trying to remember my solution to this the last time I encountered it in practice. I may have used a library to convert the strings to multi character arrays...

Jen Chan • Dec 8 '19

Omg I have not thought of this either. Multi-char graphemes really mess with my head