当您测试字符串索引访问器与charAt()方法时，会得到非常有趣的结果。看来Chrome是唯一一个更喜欢字符的浏览器。

CharAt vs index 1

图表与索引

图表与指数

括号符号现在适用于所有主流浏览器，除了IE7及以下版本。

// Bracket Notation
"Test String1"[6]

// charAt Implementation
"Test String1".charAt(6)

使用括号是一个坏主意，原因如下(来源):

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 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".

如果需要IE6/IE7兼容性，从兼容性角度来看str.charAt(i)更好。 str[i]更现代，适用于IE8+和所有其他浏览器(所有Edge/Firefox/Chrome, Safari 2+，所有iOS/Android)。

它们在边缘情况下可以给出不同的结果。

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

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

charAt函数取决于如何将索引转换为规范中的数字。

使用charAt(index)和string[index]访问字符之间有什么区别?

注:

For charAt(), index is first attempted to be type coerced into a number before the index is searched. Boolean values are type coerced. Number(true) evaluates to 1 and Number(false) evaluates to 0. All falsy values return index 0. An array containing a single element [1] or ['1'] when coerced, returns the number. Array containing multiple elements returns NaN and the treatment happens as per the table above. If index is a decimal value, as a number, string or array with one element, Math.floor(Number(index)) is applied. For bracket notation, type coercion is attempted when index provided is a string or an array containing one element. Boolean values are not type coerced. So true doesn't coerce to 1. true or false both return undefined. All falsy values except 0, return undefined. Decimal values return undefined. type falsy = null | undefined | NaN | '' falsy doesn't include 0 here, as 0 is a valid Number index.

let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

/** index > str.length */
console.log({ charAt: str.charAt(27) }); // returns ''
console.log({ brackets: str[27] }); // returns undefined

/** index < 0 */
console.log({ charAt: str.charAt(-2) }); // returns ''
console.log({ brackets: str[-2] }); // returns undefined

/** Falsy Values */

// All falsy values, return character at index 0
console.log({ charAt: str.charAt(NaN) }); // returns 'A'
console.log({ charAt: str.charAt(false) }); // returns 'A'
console.log({ charAt: str.charAt(undefined) }); // returns 'A'
console.log({ charAt: str.charAt(null) }); // returns 'A'
console.log({ charAt: str.charAt('') }); // returns 'A'

// All falsy values except 0, return undefined
console.log({ brackets: str[NaN] }); // returns undefined
console.log({ brackets: str[false] }); // returns undefined
console.log({ brackets: str[undefined] }); // returns undefined
console.log({ brackets: str[null] }); // returns undefined
console.log({ brackets: str[''] }); // returns undefined

/** index = Boolean(true) */
console.log({ charAt: str.charAt(true) }); // returns 'B', (character at index 1)
console.log({ brackets: str[true] }); // undefined

/** Type coercion: Failure */
console.log({ charAt: str.charAt('A1') }); // returns 'A' (character at index 0)
console.log({ brackets: str['ABC'] }); // returns undefined

/** Type coercion: Success */
console.log({ charAt: str.charAt('1') }); // returns 'B' (attempts to access index after type coercion)
console.log({ brackets: str['1'] }); // returns undefined (attempts to access index after type coercion)

/** Decimal Values */
console.log({ charAt: str.charAt(1.9) }); // returns 'B', applies Math.floor(Number(index))
console.log({ charAt: str.charAt('1.9') }); // returns 'B', applies Math.floor(Number(index))
console.log({ charAt: str.charAt(['1.9']) }); // returns 'B', applies Math.floor(Number(index))

console.log({ brackets: str[1.9] }); // returns undefined

在Github上查看我的快速参考

当您试图访问超出边界的索引或不是整数时，这是有区别的。

String [x]如果x是0到String之间的整数，则返回字符串中第XTH个位置的字符。Length-1，否则返回未定义。

string. charat (x)使用这里解释的过程将x转换为整数(如果x是非整数，则将x舍入，如果parseInt(x)为NaN则返回0)，然后如果整数在0和字符串之间，则返回该位置的字符。Length-1，否则返回空字符串。

下面是一些例子:

"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

另一个区别是赋值给string[x]没有任何作用(这可能会令人困惑)，赋值给string. charat (x)是一个错误(正如预期的那样):

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

给string[x]赋值不起作用的原因是Javascript字符串是不可变的。