使用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上查看我的快速参考

使用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上查看我的快速参考

括号符号现在适用于所有主流浏览器，除了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.

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

CharAt vs index 1

图表与索引

图表与指数

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

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

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

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

中数:

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)。