Is there any reason I should use
string.charAt(x) instead of the bracket notation
Bracket notation now works on all major browsers, except for IE7 and below.
// Bracket Notation "Test String1" // 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.
There are two ways to access an individual character in a string. The first is the
charAtmethod, 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'; // 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.
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; // "e"
Very interesting outcome when you test the string index accessor vs the
charAt() method. Seems Chrome is the only browser that likes
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
x is an integer between 0 and
string.length-1, and returns
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
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" //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 = '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
©2020 All rights reserved.