54

Is it ok to do this:

var myString="Hello!";
alert(myString[0]); // shows "H" in an alert window

Or should it be done with either charAt(0) or substr(0,1)? By "is it ok" I mean will it work on most browsers, is there a best practice recommandation that says otherwise etc.

Thank you.

Wim Coenen
  • 66,094
  • 13
  • 157
  • 251
Francisc
  • 77,430
  • 63
  • 180
  • 276

4 Answers4

54

Accessing characters as numeric properties of a string is non-standard prior to ECMAScript 5 and doesn't work in all browsers (for example, it doesn't work in IE 6 or 7). You should use myString.charAt(0) instead when your code has to work in non-ECMAScript 5 environments. Alternatively, if you're going to be accessing a lot of characters in the string then you can turn a string into an array of characters using its split() method:

var myString = "Hello!";
var strChars = myString.split("");
alert(strChars[0]);
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 2
    just to add a link/reference for the non-standard comment, see (under Character access): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String – davin Oct 29 '10 at 11:41
  • @davin: Thanks. I've now linked to that section in my answer. – Tim Down Oct 29 '10 at 11:45
  • Thanks, Tim. Just wanted to add that it does work in IE8. Not sure about others. – Francisc Oct 29 '10 at 11:48
  • @Francisc: Ah, OK, thanks. I tested on IE 7. I've updated my answer. – Tim Down Oct 29 '10 at 11:50
  • @Francisc: Are you sure accessing characters as numeric properties of a string works in IE 8? It doesn't seem to. – Tim Down Oct 29 '10 at 12:04
  • Hey! Yup: `var myStr="JavaScript";alert(myStr[4]);` will show "S". Just gave it another test. – Francisc Oct 29 '10 at 15:16
  • Though bear in mind that that will blow up memory usage significantly. – gsnedders Oct 16 '12 at 21:55
  • @gsnedders: I assume you're referring to the suggestion of using `split()`? Unless you're keeping lots of large arrays hanging around I can't see that being much of an issue in most situations. – Tim Down Oct 16 '12 at 21:58
  • Bizarrely, just earlier today I had reason to check whether IE8 supports bracket notation on strings, and then *completely independently* from that, came across this answer: Yes, IE8 supports bracket notation on strings. IE6 and IE7 are finally irrelevant here in 2018. :-) – T.J. Crowder Apr 19 '18 at 17:31
51

Using charAt is probably the best idea since it conveys the intent of your code most accurately. Calling substr for a single character is definitely an overkill.

alert(myString.charAt(0));
Saul
  • 17,973
  • 8
  • 64
  • 88
  • 2
    This approach fails if the first character in the string is represented by multiple UTF8 code points (emoji, combining characters, etc). – Matthemattics Dec 17 '20 at 02:13
18

2018 answer: Yes it is OK to access strings like arrays.

The syntax is clear and concise. IE6 and IE7 are long gone. I see no reason not to use it.

James
  • 5,635
  • 2
  • 33
  • 44
  • 1
    However: don't get confused into thinking you can use all the Array methods, like `reverse` and `pop`, on Strings. – Matt Montag Oct 16 '18 at 07:11
7

In ES6 we can use destructuring since a string can be treated as an array:

const [...rest] = 'Hello!';

console.log(rest)
> Array ["H", "e", "l", "l", "o", "!"]

console.log(rest[0])
> "H"
Eric Bishard
  • 5,201
  • 7
  • 51
  • 75
  • 1
    This should be the correct answer, as it's the only method which correctly handles characters that cannot be represented by a single UTF8 code point (combining characters, emoji, etc). – Matthemattics Dec 17 '20 at 02:12
  • You don't need ES6 to do that. rest = Array.prototype.slice.call("Hello!") will return the same thing and it works in old browsers. – PHP Guru Mar 07 '23 at 07:40