JavaScriptのcharAt()メソッドとは？文字列から指定位置の文字を取得する方法

JavaScriptには、文字列の中から指定したインデックス（位置）にある文字を取得できるStringオブジェクトのメソッドが用意されています。それがcharAt()メソッドです。本記事では、charAt()メソッドの基本的な仕組みから具体的な使い方まで、サンプルコード付きでわかりやすく解説します。

前提知識：プリミティブ型とは何か

charAt()メソッドを正しく理解するために、まずJavaScriptのプリミティブ型についておさらいしておきましょう。

プリミティブ型（プリミティブ値）とは、オブジェクトではなく、それ自体にはメソッドが関連付けられていないデータのことです。JavaScriptにおけるプリミティブ型は、以下の6種類です。

string（文字列）
number（数値）
boolean（真偽値）
bigint
symbol
undefined

今回注目するのは、この中のstringプリミティブ値です。

ここで興味深いのは、stringプリミティブ値はStringオブジェクトとほぼ相互に置き換え可能だという点です。多くの場合、JavaScriptはstringプリミティブ値を自動的にStringオブジェクトでラップし、Stringオブジェクトが持つメソッドを使えるようにしてくれます。そのため、開発者は「メソッドを持たないstringプリミティブ値」を「メソッドを持つStringオブジェクト」へ意識的に変換することを、ほとんど気にする必要がありません。

charAt()メソッドの基本構文

charAt()メソッドの構文は非常にシンプルです。対象となる文字列に対してドット記法でメソッドにアクセスし、引数として取得したい文字のインデックスを渡すだけです。

const charAtFive = new String("It is warm today.").charAt(5);

このコードを実行すると、charAt()メソッドは指定されたインデックス位置にある1文字を返します。なお、文字列のインデックスは0始まりである点に注意してください。つまり、最初の文字がインデックス0、2番目の文字がインデックス1となり、以降順番に続いていきます。

また、範囲外のインデックスを指定した場合、エラーにはならず空文字列（""）が返される点も覚えておくと便利です。

実際に動作するサンプルコード

以下は、フォームに入力された文字列とインデックスをもとに、charAt()メソッドの結果を画面に表示する実装例です。文字列とインデックスを入力して送信ボタンを押すと、指定した位置の1文字が表示されます。範囲外のインデックスを指定した場合は、バリデーションによってエラーメッセージが表示される仕組みになっています。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>charAt() デモ</title>
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="to-fixed">文字列を入力：</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">インデックスを入力：</label>
     <input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
 
     <input type="submit" value="送信" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = '';
     let numVal = '';
     let errorVal = '';
 
     const handleChange = e => {
       if(e.target.name === "inputVal") {
         inputVal = e.target.value;
       } else {
         if(inputVal.length - 1 < e.target.value || e.target.value < 0) {
           errorVal = "文字列の長さ未満で、0以上のインデックスを入力してください"
         } else {
           errorVal = "";
           numVal = e.target.value;
         }
       }
     }
     const handleSubmit = e => {
       e.preventDefault();
       const root = document.querySelector("#root");
       if(errorVal) {
         root.innerHTML = errorVal;
       } else {
         root.innerHTML = new String(inputVal).charAt(Number(numVal));
         console.log(new String(inputVal).charAt(Number(numVal)));
       }
     }
   </script>
 </body>
</html>

まとめ

charAt()メソッドを使えば、文字列から任意の位置にある1文字を簡単に取り出せます。ポイントは以下の3つです。

インデックスは0始まりで指定する
引数を省略するとデフォルトで0が使われる
範囲外のインデックスを指定してもエラーにはならず、空文字列が返る

文字列操作はJavaScriptの基礎であり、実務でも頻繁に登場します。charAt()メソッドをマスターして、文字列処理の幅を広げてみてください。

あわせて読みたい関連記事

JavaScriptで文字列を反転させるコードチャレンジ
JavaScriptのpop()メソッド：概要と使い方
JavaScriptでのsubstring()の使い方
JavaScriptで文字列に特定の文字列が含まれるか判定する方法
JavaScriptのtoUpperCase()とtoLowerCase()

JavaScriptのObject.assign()メソッドとは？オブジェクトのコピーとマージをわかりやすく解説

JavaScriptのtoFixed()メソッドとは？数値の小数点以下を固定する方法を解説

JavaScriptのString.trimStart()とString.trimEnd()メソッドの使い方を解説
JavaScriptには、文字列に含まれる不要な空白を取り除くための便利なメソッドが用意されています。String.trimStart()は文字列の先頭にある空白を削除し、String.trimEnd()は文字列の末尾にある空白を削除します。どちらのメソッドも元の文字列自体は変更せず、空白を取り除いた新しい文字列を返す点に注意してください。また、先頭と末尾の両方の空白を一度に削除したい場合は、従来から提供されているtrim()メソッドを使用します。サンプルコード以下は、String.trimStart()とString.trimEnd()メソッドの動作を確認できるコード例です。<!DOC
JavaScriptでプロトタイプを使ってメソッドを共有する方法
JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS