JavaScript | 基礎構文：文字列操作 – length

JavaScript JavaScript
2025.12.12
スポンサーリンク

length を一言でいうと

length は、
「この文字列の“文字数”はいくつか」を教えてくれるプロパティ です。

JavaScript では、文字列に対して 文字列.length と書くだけで、
その文字列の長さ（何文字あるか）が数値で返ってきます。

ここが重要です。
フォームの入力チェック、空文字かどうかの判定、
一部だけ切り出す処理など、「文字列の長さ」を意識する場面で length はほぼ必ず使います。

length の基本の使い方

文字列に .length をつけるだけ

一番シンプルな例から見てみます。

const text = "JavaScript";

console.log(text.length); // 10
JavaScript

"JavaScript" は 10 文字なので、text.length は 10 になります。

空文字だと 0 です。

const empty = "";
console.log(empty.length); // 0
JavaScript

このように、
文字列.length は「その文字列の文字数」を返すプロパティ です。

実行例とイメージ

const a = "abc";
const b = "こんにちは";

console.log(a.length); // 3
console.log(b.length); // 5
JavaScript

英字でも日本語でも、「1文字」と認識されていれば 1 カウントされます。
ひらがな 1 つも、アルファベット 1 文字も、length 上は同じ 1 文字です。

ここが重要です。
length の結果は「見た目の幅」ではなく「文字の数」。
「あいう」は 3、「abc」も 3、として数えられる。

よくある用途①：入力チェック（文字数制限・空文字判定）

文字数制限のチェック

例えば、ユーザー名は 3〜10 文字以内としたいとします。

const username = "Taro";

if (username.length < 3) {
  console.log("ユーザー名は3文字以上にしてください");
} else if (username.length > 10) {
  console.log("ユーザー名は10文字以内にしてください");
} else {
  console.log("OK");
}
JavaScript

username.length を使って、
3 未満・10 より大きい・その間、
という条件分岐が簡単に書けます。

空文字かどうかの判定

「何も入力されていないか」をチェックするときも、length がよく使われます。

const input = "";

if (input.length === 0) {
  console.log("何も入力されていません");
}
JavaScript

または

if (!input) {
  // これも空文字のときに true になるが、
  // null や undefined も含めて「何もない」とみなす場合に使う
}
JavaScript

ただ、文字列として「空かどうか」を確認したいなら、input.length === 0 のほうが明確です。

ここが重要です。
「未入力かどうか」「長すぎないか」を見るときは、必ず length を使う。
フォームのバリデーション（入力チェック）の基本中の基本です。

よくある用途②：最後の文字へのアクセス

インデックスと length の関係

前に学んだ通り、文字列のインデックス（位置）は 0 から始まります。

const text = "Hello";

console.log(text[0]); // "H"
console.log(text[1]); // "e"
console.log(text[2]); // "l"
console.log(text[3]); // "l"
console.log(text[4]); // "o"
JavaScript

このとき、
文字数は text.length === 5。
最後のインデックスは 4 です。

つまり、

「最後の文字の位置」 = length - 1

という関係があります。

length を使って最後の文字を取り出す

const text = "JavaScript";

const lastIndex = text.length - 1;
const lastChar = text[lastIndex];

console.log(lastIndex); // 9
console.log(lastChar);  // "t"
JavaScript

慣れてくると、よくこう書きます。

const lastChar = text[text.length - 1];
JavaScript

ここが重要です。
「0 始まり」なので、最後のインデックスは length - 1。
このパターンは配列でも同じで、for 文やループ処理とセットで頻出します。

ループと length：文字列を1文字ずつ処理する

length を使った for 文

文字列を 1 文字ずつ処理したいとき、
length を使って「どこまで回すか」を決めるのが定番です。

const text = "ABC";

for (let i = 0; i < text.length; i++) {
  console.log(i, text[i]);
}
JavaScript

このループは、

i = 0 → text[0] → “A”
i = 1 → text[1] → “B”
i = 2 → text[2] → “C”

というふうに、文字列の全ての文字を順番に扱っています。

もし i < text.length のところを i <= text.length と書いてしまうと、
text[text.length]（存在しない位置）にアクセスして undefined になってしまうので注意です。

応用例：特定の文字の数を数える

例えば、「文字列の中に ‘a’ が何個あるか数える」処理を書いてみます。

const text = "banana";
let count = 0;

for (let i = 0; i < text.length; i++) {
  if (text[i] === "a") {
    count++;
  }
}

console.log(`"a" は ${count} 個あります`); // "a" は 3 個あります
JavaScript

このように、
length を使って範囲（0〜length-1）を決め、インデックスで 1 文字ずつ見ていく のが基本パターンです。

ここが重要です。
「0 から length – 1 まで回す」というループパターンを体に染み込ませると、
文字列も配列も一気に扱いやすくなります。

length と特殊文字・エスケープシーケンス

エスケープシーケンスは 1 文字とカウントされる

例えば、\n は「改行」を表すエスケープシーケンスでしたね。

const text = "A\nB";
console.log(text);        // A と B が改行されて表示される
console.log(text.length); // 3
JavaScript

"A\nB" の length は 3 です。

中身のイメージは：

“A”, 改行文字, “B”

の 3 文字だからです。

ソースコード上は \ と n の 2 文字ですが、
文字列の中身としては「改行 1 文字」として扱われます。

日本語や絵文字と length の微妙な話（ざっくり）

ひらがな・漢字などは、
普通に 1 文字としてカウントされます。

const text = "あいう";
console.log(text.length); // 3
JavaScript

ただし、絵文字や一部の特殊文字は、
内部的に「2つ分のコードユニット」で表現されることがあります。

例えば、ある絵文字が length 2 になることもあります（環境による差もあるため、ここでは実行結果までは断言しませんが）。

実務で「画面に何文字分の幅として見えるか」と
length の値がズレることがある、ということだけ覚えておけば十分です。

ここが重要です。
length は「コードユニットの数」であって、「見た目の幅」や「人間が数える“文字数”」と完全には一致しないこともある。
ただし、普通のアルファベットや日本語だけを扱う範囲では、ほとんどの場合は意識しなくて大丈夫です。

length を使うときに意識したいポイント

文字列の中身を変えずに「状態だけ見る」プロパティ

length はプロパティなので、
読んでも文字列そのものは変わりません。

const text = "hello";
const len = text.length;

console.log(text); // "hello"（変わらない）
console.log(len);  // 5
JavaScript

これは配列の length と同じです。
「状態を教えてくれるだけ」で、文字列自体は変更不可（イミュータブル）なまま です。

トリミングや変換と組み合わせて使う

例えば、「前後の空白を除いた上で、中身があるかどうか」をチェックする場合。

const raw = "   hello   ";
const trimmed = raw.trim();

if (trimmed.length === 0) {
  console.log("実質空文字です");
} else {
  console.log(`実質の文字数は ${trimmed.length} です`); // 5
}
JavaScript

trim() で前後の空白を落としてから length を見ることで、
「空白だけの入力」を「空」とみなす、といったことができます。

ここが重要です。
length 単体だけでなく、trim() などの他の文字列メソッドと組み合わせることで、
より実用的な「入力チェック」「文字数カウント」が書けるようになります。

初心者として length で押さえてほしいこと

最後に、length について本当に大事なポイントだけ整理します。

文字列.length は、その文字列の「文字数」を表す数値。
空文字の length は 0。

入力チェック（空かどうか、長すぎないか）に頻繁に使う。
「最後の文字」は str[str.length - 1] で取れる。

for 文と組み合わせて、「0 から length – 1 まで」を回しながら 1 文字ずつ処理するのが基本パターン。

\n などのエスケープシーケンスは、コード上は2文字でも、内部的には「1文字」として length にカウントされる。

ここが重要です。
length は「文字列が今どんな状態か」を知るための最初の入り口です。
困ったらとりあえず console.log(str, str.length) と出してみる。
その癖をつけるだけで、“思っていたより短い／長い”“空だと思っていたのに空じゃない” といった勘違いが一気に減ります。

もしよければ、次のような小さな練習をしてみてください。

const inputs = ["", "a", "abc", "  space  ", "あいう"];

for (const s of inputs) {
  console.log(`"${s}" の length は ${s.length}`);
}
JavaScript

ここからさらに、trim() をかけた長さも一緒に出してみると、
「見た目と length の関係」「空白の影響」などが、かなり実感としてつかめてくるはずです。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました