javascript - string.charAt(x) と string[x] のどちら？

string[x] の角括弧記法の代わりに string.charAt(x) を使うべき理由はありますか？

回答 #1

ブラケット表記は、IE7以下を除くすべての主要なブラウザで動作するようになりました。

// Bracket Notation
"Test String1"[6]

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

これらの理由から、かつてはカッコを使うことは良くないとされていました（出典）:

この表記法はIE7では動作しません。 最初のコードスニペットはIE7ではundefinedを返します。もしコード全体で文字列に対してブラケット表記を多用していて、.charAt(pos)に移行したい場合、これは本当に面倒です。コード中にブラケットが多用されており、それが文字列用なのか配列/オブジェクト用なのかを簡単に判別する方法がありません。
この表記を使って文字を設定することはできません。 何の警告もないので、本当に混乱してイライラします。もし .charAt(pos) 関数を使っていたなら、こんなことをしようとは思わなかったでしょう。

回答 #2

MDN から：

文字列内の個々の文字にアクセスする方法は2つあります。1つ目は、ECMAScript 3の一部であるcharAtメソッドです。
return 'cat'.charAt(1); // returns "a"
もう一つの方法は、文字列を配列のようなオブジェクトとして扱うことで、各文字が数値インデックスに対応します。これは、IEを除くほとんどのブラウザで初期バージョンからサポートされています。ECMAScript 5で標準化されました。
return 'cat'[1]; // returns "a"
2つ目の方法はECMAScript 5のサポートが必要です（古いブラウザの一部ではサポートされていません）。
どちらの場合も、個々の文字を変更しようとしても動作しません。文字列は不変（immutable）であり、そのプロパティは「書き込み可能（writable）」でも「設定可能（configurable）」でもないからです。

もしIE6/IE7の互換性が必要な場合、互換性の観点からはstr.charAt(i)の方が優れています。
str[i] はよりモダンで、IE8以降および他のすべてのブラウザ（すべてのEdge/Firefox/Chrome、Safari 2以降、すべてのiOS/Android）で動作します。

回答 #3

それらは、端のケースでは異なる結果を出すことがあります。

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

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

charAt 関数は、仕様でインデックスがどのように Number に変換されるかに依存します。

回答 #4

範囲外のインデックスまたは整数でないインデックスにアクセスしようとすると、違いがあります。

`string[x]` は、もし `x` が 0 から `string.length-1` の間の整数であれば `string` の `x` 番目の文字を返し、それ以外の場合は `undefined` を返します。

string.charAt(x) は、ここで説明されている方法を使って x を整数に変換します（基本的には x が非整数の場合は切り捨て、parseInt(x) が NaN の場合は 0 を返します）その後、整数が 0 から string.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 の文字列は不変だからです。

回答 #5

String.charAt() は元々の標準であり、すべてのブラウザで動作します。IE 8 以降およびその他のブラウザでは、角括弧表記を使って文字にアクセスすることができますが、IE 7 以下ではサポートされていません。

もし誰かが本当に IE 7 でブラケット記法を使いたい場合は、文字列を str.split('') を使って配列に変換し、それを配列として使用するのが賢明です。これはどのブラウザでも互換性があります。