JavaScript | 文字列の中から、指定した位置の1文字を取り出す（charAt メソッド）

JavaScript JavaScript
2020.06.16
スポンサーリンク

JavaScriptの文字を取り出す基礎とcharAtの使い方

ここでは「文字列から1文字を取り出す」ための基本を、手で動かしながら身につけられるように丁寧に解説します。迷ったらまず動かす。動かしたら観察する。この繰り返しで自然と理解できます。

文字列とインデックスの考え方

  • 文字列とは: 文字の並びのこと。例: 'Hello'、'花言葉'
  • インデックスとは: 文字の位置を表す番号。最初は必ず0から。
  • 数え方の例:
    • 'Hello' → H:0, e:1, l:2, l:3, o:4
    • '花言葉' → 花:0, 言:1, 葉:2

0から始まるのはプログラミングの定番。最初は違和感があるけど、すぐ慣れます。

charAtで1文字を取り出す

  • 基本形: 
文字列.charAt(インデックス)
JavaScript
  • 動き: 指定した位置の「1文字」だけ返す
const word = '花言葉';

console.log(word.charAt(0)); // '花'
console.log(word.charAt(1)); // '言'
console.log(word.charAt(2)); // '葉'
console.log(word.charAt(3)); // ''（空文字：範囲外）
JavaScript
  • ポイント
    • 0から数える: 最初が0、次が1
    • 範囲外は空文字: ない位置を指定すると '' が返る
    • 1文字だけ: 連続した複数文字は取り出せない

よくあるつまずきと回避法

  • 全角・絵文字に注意: 一部の絵文字は見た目1文字でも内部的には複数のコード点の組み合わせ。charAtでは片方だけになることがある
    • 例: '👍' は環境によって charAt(0) が正しく1文字に見えない場合がある
  • 範囲外チェックを入れる: インデックスが正しいか確認してから取り出す
function safeCharAt(str, index) {
  if (index < 0 || index >= str.length) return '';
  return str.charAt(index);
}

console.log(safeCharAt('Hello', 4)); // 'o'
console.log(safeCharAt('Hello', 5)); // ''
JavaScript

charAtと角括弧アクセスの違い

  • 角括弧アクセス: 
'Hello'[1] // 'e'
JavaScript
  • 違いのポイント
    • 古い環境でも確実なのはcharAt: 角括弧が使えない古いブラウザでもcharAtは動く
    • 範囲外の挙動: 角括弧は undefined を返すことがあるが、charAtは空文字 '' を返す
const s = 'Hi';
console.log(s[5]);        // undefined（環境による）
console.log(s.charAt(5)); // ''（常に空文字）
JavaScript

実践例題で理解を固める

例題1: 1文字目と最後の文字を取り出す

const name = 'JavaScript';

const first = name.charAt(0);
const last  = name.charAt(name.length - 1);

console.log(first); // 'J'
console.log(last);  // 't'
JavaScript
  • ラベル: 最初は0、最後はlength - 1

例題2: 文字列の中央の文字（または2文字）を取り出す

function middleChars(str) {
  const len = str.length;
  const mid = Math.floor(len / 2);
  if (len % 2 === 1) {
    return str.charAt(mid);
  } else {
    return str.charAt(mid - 1) + str.charAt(mid);
  }
}

console.log(middleChars('abc'));   // 'b'
console.log(middleChars('abcd'));  // 'bc'
JavaScript
  • ラベル: 奇数は1文字、偶数は2文字を連結

例題3: 指定した文字が何回出てくるか数える

function countChar(str, target) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charAt(i) === target) count++;
  }
  return count;
}

console.log(countChar('banana', 'a')); // 3
JavaScript
  • ラベル: ループで1文字ずつ比較

例題4: 文字列を1文字ずつ表示する（練習に最適）

const s = '学ぶなら今';

for (let i = 0; i < s.length; i++) {
  console.log(i + ': ' + s.charAt(i));
}
JavaScript
  • ラベル: インデックスと文字をペアで確認

似た機能との使い分け

  • 部分文字列がほしいなら: slice や substring
const s = 'JavaScript';
console.log(s.slice(4, 10)); // 'Script'（開始含む、終了は含まない）
JavaScript
  • 文字数を知りたいなら: length 
'花言葉'.length // 3
JavaScript
  • 検索したいなら: indexOf 
'banana'.indexOf('na') // 2
JavaScript

1文字ならcharAt、複数文字ならslice。迷ったら「何文字ほしい？」で判断。

手を動かす練習問題

  • 問題1: 文字列'東京'の2文字目を取り出して表示する
    • 期待値: '京'
  • 問題2: 文字列の先頭と末尾が同じ文字か判定する関数isSameEnds(str)を作る
    • 例: 'level' → true、'world' → false
  • 問題3: 文字列'mississippi'の's'の出現回数を数える
    • 期待値: 4
  • 問題4: インデックスが範囲外なら '?' を返し、範囲内なら該当文字を返すsafeGet(str, i)を作る
    • ヒント: lengthと比較、charAtの戻り値で分岐

解答と解説

✅ 問題1: '東京'の2文字目を取り出す

const city = '東京';
console.log(city.charAt(1)); // '京'
JavaScript
  • 解説: インデックスは0から始まるので、0が「東」、1が「京」。
  • ポイント: charAt(1)で2文字目を取得できる。

✅ 問題2: 先頭と末尾が同じ文字か判定する関数

function isSameEnds(str) {
  if (str.length === 0) return false; // 空文字はfalseにしておく
  const first = str.charAt(0);
  const last  = str.charAt(str.length - 1);
  return first === last;
}

console.log(isSameEnds('level')); // true
console.log(isSameEnds('world')); // false
JavaScript
  • 解説:
    • 先頭は charAt(0)
    • 末尾は charAt(str.length - 1)
    • それを比較するだけ。
  • ポイント: length - 1 が最後の文字の位置。

✅ 問題3: 'mississippi' の 's' の出現回数

function countChar(str, target) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charAt(i) === target) {
      count++;
    }
  }
  return count;
}

console.log(countChar('mississippi', 's')); // 4
JavaScript
  • 解説:
    • 文字列をループで1文字ずつ取り出す
    • targetと一致したらカウントを増やす
  • ポイント: charAt(i)を使うと「1文字ずつチェック」が簡単にできる。

✅ 問題4: 範囲外なら '?' を返す safeGet

function safeGet(str, index) {
  if (index < 0 || index >= str.length) {
    return '?';
  }
  return str.charAt(index);
}

console.log(safeGet('Hello', 1)); // 'e'
console.log(safeGet('Hello', 10)); // '?'
JavaScript
  • 解説:
    • indexが0未満、またはlength以上なら範囲外
    • その場合は '?' を返す
    • 範囲内なら charAt(index) を返す
  • ポイント: charAtは範囲外だと空文字を返すが、ここでは分かりやすく '?' に置き換えている。

まとめ

  • インデックスは0から始まる
  • 最後の文字は length - 1
  • ループと組み合わせると文字列処理が自由自在

小さなコツ

  • ラベル: 長さを変数に入れてから使うとミスが減る 
const s = 'Hello';
const len = s.length;
console.log(s.charAt(len - 1)); // 'o'
JavaScript
  • ラベル: ループするときは< str.lengthを徹底
  • ラベル: 範囲外は空文字、という挙動を覚えておくと分岐が楽

次の一歩

  • 提案: 今日書いた例題を自分の好きな言葉で置き換えて動かしてみる
  • 提案: 1文字取り出しに慣れたら、sliceで「部分文字列」を取る練習へ
前へ次へ
1234
スポンサーリンク
タイトルとURLをコピーしました