string.charAt(x) or string[x]?

Is there any reason I should use string.charAt(x) instead of the bracket notation string[x]?

Bracket notation now works on all major browsers, except for IE7 and below.

// Bracket Notation
"Test String1"[6]
 
// charAt Implementation
"Test String1".charAt(6)

It used to be a bad idea to use brackets, for these reasons (Source):

> This notation does not work in IE7. > The first code snippet will return > undefined in IE7. If you happen to use > the bracket notation for strings all > over your code and you want to migrate > to .charAt(pos), this is a real pain: > Brackets are used all over your code > and there's no easy way to detect if > that's for a string or an > array/object. > > You can't set the character using this notation. As there is no warning of > any kind, this is really confusing and > frustrating. If you were using the > .charAt(pos) function, you would not > have been tempted to do it.

From MDN:

> There are two ways to access an individual character in a string. The first is the charAt method, part of ECMAScript 3: > > return 'cat'.charAt(1); // returns "a" > > The other way is to treat the string as an array-like object, where each individual characters correspond to a numerical index. This has been supported by most browsers since their first version, except for IE. It was standardised in ECMAScript 5: > > return 'cat'1; // returns "a" > > The second way requires ECMAScript 5 support (and not supported in some older browsers). > > In both cases, attempting to change an individual character won't work, as strings are immutable, i.e., their properties are neither neither "writable" nor "configurable".

• str.charAt(i) is better from a compatibility perspective if IE6/IE7 compatibility is required.

• str[i] is more modern and works in IE8+ and all other browsers (all Edge/Firefox/Chrome, Safari 2+, all iOS/Android).

They can give different results in edge cases.

'hello'[NaN] // undefined
'hello'.charAt(NaN) // 'h'

'hello'[true] //undefined
'hello'.charAt(true) // 'e'

The charAt function depends on how the index is converted to a Number in the [spec][1].

[1]: http://www.ecma-international.org/ecma-262/5.1/#sec-9.3 "ToNumber"

There is a difference when you try to access an index which is out of bounds or not an integer.

string[x] returns the character at the xth position in string if x is an integer between 0 and string.length-1, and returns undefined otherwise.

string.charAt(x) converts x to an integer using the process explained here (which basically rounds x down if x is a non-integer number and returns 0 if parseInt(x) is NaN) and then returns the character at the that position if the integer is between 0 and string.length-1, and returns an empty string otherwise.

Here are some examples:

"Hello"[313]    //undefined
"Hello".charAt(313)    //"", 313 is out of bounds

"Hello"[3.14]    //undefined
"Hello".charAt(3.14)    //'l', rounds 3.14 down to 3

"Hello"[true]    //undefined
"Hello".charAt(true)    //'e', converts true to the integer 1

"Hello"["World"]    //undefined
"Hello".charAt("World")    //'H', "World" evaluates to NaN, which gets converted to 0

"Hello"[Infinity]    //undefined
"Hello".charAt(Infinity)    //"", Infinity is out of bounds

Another difference is that assigning to string[x] does nothing (which can be confusing) and assigning to string.charAt(x) is an error (as expected):

var str = "Hello";
str[0] = 'Y';
console.log(str);    //Still "Hello", the above assignment did nothing
str.charAt(0) = 'Y';    //Error, invalid left-hand side in assignment

The reason why assigning to string[x] doesn't work is because Javascript strings are immutable.

String.charAt() is the original standard and works in all the browsers. In IE 8+ and other browsers, you may use bracket notation to access characters but IE 7 and below did not support it.

If somebody really wants to use bracket notation in IE 7, it's wise to convert the string to an array using str.split('') and then use it as an array, compatible with any browser.

var testString = "Hello"; 
var charArr = testString.split("");
charArr[1]; // "e"

Very interesting outcome when you test the string index accessor vs the charAt() method. Seems Chrome is the only browser that likes charAt more.

CharAt vs index 1

ChartAt vs index 2

ChartAt vs index 3