文字列.charAt() / at()

// 指定した位置の文字を取得
文字列.charAt(位置)

// 指定した位置の文字を取得（負の値で末尾からの位置を指定できる）
文字列.at(位置)

// 指定した位置の文字のUTF-16コードを取得
文字列.charCodeAt(位置)

var str = "Hello";

// charAt で文字を取得
console.log(str.charAt(0)); // 『H』と出力されます。
console.log(str.charAt(4)); // 『o』と出力されます。
console.log(str.charAt(10)); // 範囲外のため空文字『』が出力されます。

// at で文字を取得（負の値で末尾から指定できる）
console.log(str.at(0)); // 『H』と出力されます。
console.log(str.at(-1)); // 末尾の『o』と出力されます。
console.log(str.at(-2)); // 末尾から2番目の『l』と出力されます。

// charCodeAt で文字コードを取得
console.log(str.charCodeAt(0)); // 『H』のUTF-16コード『72』と出力されます。
console.log(str.charCodeAt(1)); // 『e』のUTF-16コード『101』と出力されます。

// ブラケット記法でも文字を取得できる
console.log(str[0]); // 『H』と出力されます。
console.log(str[-1]); // ブラケット記法では負の値は使えず『undefined』と出力されます。

H
o

H
o
l
72
101
H
undefined

ミス1: charAtとブラケット記法の戻り値の違いを知らない

範囲外のインデックスを指定したとき、charAtは空文字列を返しますが、ブラケット記法ではundefinedを返します。条件分岐で使う場合は、どちらの戻り値になるかを意識してください。

var str = "Hello";
// NG: undefinedと空文字列は異なるので条件が変わる
if (str[10]) { console.log("文字あり"); } // undefinedなのでfalse
if (str.charAt(10)) { console.log("文字あり"); } // 空文字列なのでfalse（同じだが意図が違う場合がある）

修正後は次の通りです。

var str = "Hello";
// OK: 明示的に比較する
var ch = str.charAt(10);
if (ch !== "") { console.log("文字あり"); }
var chBracket = str[10];
if (chBracket !== undefined) { console.log("文字あり"); }

ミス2: 負のインデックスをcharAtで使おうとする

charAtは負の値に対応していません。負のインデックスで末尾から取得したい場合はat()を使ってください。charAtに負の値を渡すと空文字列が返ります。

var str = "Hello";
// NG: charAtに負の値を渡しても空文字列が返るだけ
console.log(str.charAt(-1)); // 『』（空文字列）

修正後は次の通りです。

var str = "Hello";
// OK: 末尾の文字を取得するにはat()を使う
console.log(str.at(-1)); // 『o』
// または古い書き方:
console.log(str.charAt(str.length - 1)); // 『o』

『文字列.charAt()』は指定した位置の文字を1つ返す基本的なメソッドです。同じ機能を持つ『文字列.at()』は負の値を指定できるため、末尾から文字を取得する場合に便利です。

ブラケット記法（ str[0] ）でも文字を取得できますが、負の値には対応していません。末尾の文字を取得したい場合は str[str.length - 1] と書く必要がありますが、『文字列.at(-1)』なら簡潔に記述できます。

『文字列.charCodeAt()』は文字のUTF-16コードを数値で返します。文字の比較や変換処理を行う場面で使用されますが、通常の文字取得では『文字列.charAt()』や『文字列.at()』を使うのが一般的です。