文字列とテキスト処理 — 文字を切り出し、探し、置き換える

1.文字列は文字の並びです

第2講で見たように、文字列（string）は引用符で囲んだ値です。ダブルクォートの"りんご"もシングルクォートの'りんご'も同じ文字列で、バッククォートで囲むテンプレート文字列（テンプレートリテラル）は文字列の中に変数の値を埋め込むときに使います。テンプレート文字列の形は下のコードで直接確かめてください。どの引用符を使うにしても、一つのプログラムの中ではそろえたほうが読みやすくなります。

文字列は文字が順番に並んだものなので、第6講の配列と同じように番号（インデックス）で一文字ずつ取り出せます。最初の文字が0番で、s.lengthは文字単位の長さです。そのため最後の文字はs[s.length - 1]で、最近はs.at(-1)のように後ろから数える書き方も使います。存在しない番号を取り出すとエラーではなくundefinedになる点も配列と同じです。

配列と大きく違う点が一つあります。文字列は一度作ると中の文字を変えられません。s[0] = "z"のように一文字を書き換えようとすると、この練習場のように厳格モード（strict mode）で動くコードではTypeErrorになります。そのため、この講義のメソッドはどれも元の文字列を書き換えず、「新しい文字列」を返します。結果を使うには、必ず変数で受け取っておく必要があります。

const name = "健太";
const fruit = 'りんご';
const msg = `${name}さん、${fruit}3個`;
console.log(msg);
console.log(msg.length);
console.log(msg[0], msg.at(-1), msg[99]);

健太さん、りんご3個
10
健 個 undefined

let s = "  hello  ";
s.trim();
console.log("[" + s + "]");
s = s.trim();
console.log("[" + s + "]");

[  hello  ]
[hello]

2.文字数の落とし穴 — 絵文字と濁点

lengthは「目に見える文字数」ではなく、JavaScriptが文字列を保存する単位（UTF-16のコード単位）の個数です。ふだん使うひらがな・カタカナ・漢字はほとんどが1文字1単位なので、"日本".lengthは2、"こんにちは".lengthは5と、見たとおりになります。英字・数字・空白・句読点も1文字が1単位です。なお、韓国語のハングルも同じで、ふつうの形なら1文字1単位です。

絵文字は違います。多くの絵文字は2単位で保存されるので、"😀".lengthは2です。肌の色がついた手の形のように、いくつかの部品を組み合わせて一つの形に見せる絵文字は、4かそれ以上になることもあります。文字列を[...s]のように展開するとコードポイント単位に分かれ、😀一つは1になりますが、組み合わせた絵文字はそれでも部品の数だけ出てきます。画面に見える形の単位で正確に数えるには、Intl.Segmenterのような別の道具が必要です。

日本語の文字もいつも安心とは限りません。同じ「が」でも、「か」と濁点を別々に保存した形（分解形、NFD）で入ってくると長さが2になります。一部のソフトからコピーしたファイル名がこの形で入ってくることがあり、見た目は同じ文字なのに===の比較がfalseになることもあります。そういうときはs.normalize("NFC")で一つの形にそろえてから比べます。

もう一つ、文字数とバイト数は別物です。ファイルやネットワークでよく使うUTF-8方式では、ひらがなや漢字1文字はふつう3バイトです。「最大90バイト」のようにバイトで制限する入力欄があるなら、lengthで数えてはいけません。まとめると、日本語中心のふつうの文章ならlengthで数えて構いませんが、絵文字・分解形の文字・バイト制限が絡むときは、まず何を数えるのかを決める必要があります。

console.log("日本".length, "こんにちは".length);
console.log("😀".length, [..."😀"].length);
console.log("👍🏽".length, [..."👍🏽"].length);

2 5
2 1
4 2

const a = "が";
const b = a.normalize("NFD");
console.log(a.length, b.length);
console.log(a === b);
console.log(a === b.normalize("NFC"));
const bytes = new TextEncoder().encode("日本");
console.log(bytes.length);

1 2
false
true
6

3.切り出しと検索 — `slice`、`indexOf`、`includes`

s.slice(開始, 終了)は、開始番号から終了番号の「一つ手前」までを切り出して新しい文字列として返します。終了を省くと最後まで切り出し、負の数を渡すと後ろから数えます。つまりs.slice(0, 3)は先頭の3文字、s.slice(-4)は末尾の4文字です。終了番号を含まないという決まりは、第4講の繰り返しでi < nと書いたのと同じ感覚で、長さは「終了 − 開始」ですぐ計算できます。

検索には主に三つを使います。s.indexOf("探す語")は最初に現れる位置の番号を、見つからなければ-1を返します。位置はいらず、あるかどうかだけ知りたいなら、s.includes("探す語")がtrue/falseを返すので、第3講の条件分岐にそのまま入れやすくなります。startsWithとendsWithは、先頭や末尾がその語で始まる・終わるかを調べます。ファイル名が".csv"で終わるかを確かめる、といった使い方です。

indexOfの結果をそのまま条件に使うと落とし穴にはまります。探す語が先頭にあると結果は0ですが、第3講で見たように0はfalsyなので、if (s.indexOf("x"))は「先頭にあるとき」に偽になってしまいます。あるかどうかだけを見るならincludesを使い、indexOfを使うなら!== -1と比べてください。また、これらのメソッドは大文字と小文字を区別するので、"Apple".includes("apple")はfalseです。大文字小文字を無視したいときは、両方をtoLowerCase()でそろえてから探します。

const phone = "090-1234-5678";
console.log(phone.slice(0, 3));
console.log(phone.slice(-4));
console.log(phone.slice(4, 8));

090
5678
1234

const file = "2026_売上記録.csv";
console.log(file.indexOf("_"));
console.log(file.indexOf("x"));
console.log(file.includes("売上"));
console.log(file.endsWith(".csv"));
console.log("Apple".includes("apple"));
const t = "Apple".toLowerCase();
console.log(t.includes("apple"));

4
-1
true
true
false
true

const email = "[email protected]";
const at = email.indexOf("@");
if (at === -1) {
  console.log("メールの形式ではない");
} else {
  console.log(email.slice(0, at));
}

kenta

4.分ける・つなぐ・整える — `split`、`join`、`trim`

テキスト処理の半分はsplitとjoinです。s.split(",")はカンマを区切りにして文字列を切り分け、配列として返します。arr.join("-")は逆に、配列を一つの文字列につなぎます。文字列を配列に変えれば、第6講で学んだlength・map・filterがすべて使えるので、「分ける → 配列として処理 → またつなぐ」が基本の流れになります。第9講の自動化の例も、この流れの上に成り立っています。

splitには知っておきたい端のケースがあります。空文字列""を分けると、空の配列ではなく、空文字列を一つ含んだ配列[ '' ]になります。カンマが二つ続くと、その間に空文字列ができます。そのため「単語がいくつあるか」をsplit(" ").lengthで数えると、空の入力が1個になったり、空白が重なったところで数が増えたりします。境界値を必ず一緒に試すべき理由です。

trim()は前後の空白・タブ・改行を取り除きます（途中の空白はそのまま）。人が入力した値は前後に空白がついてくることが多いので、比較や保存の前にtrim()を通す習慣をつけるとよいでしょう。toUpperCase()・toLowerCase()は英字の大文字・小文字を変え、ひらがなや漢字のように大文字小文字のない文字はそのままにします。padStart(3, "0")は長さが3になるまで先頭を"0"で埋め、"7"を"007"にします。番号や時刻を桁をそろえて表示するときに使います。

const line = "健太,りんご,3";
const cols = line.split(",");
console.log(cols);
console.log(cols.length, cols[1]);
console.log(cols.join(" / "));

[ '健太', 'りんご', '3' ]
3 りんご
健太 / りんご / 3

console.log("".split(","));
console.log("a,,b".split(","));
console.log("  Hi  ".trim().toUpperCase());
console.log("7".padStart(3, "0"));
console.log("あいう".toUpperCase());

[ '' ]
[ 'a', '', 'b' ]
HI
007
あいう

• split("")（空文字列を区切りにする）は1単位ずつ分けます。絵文字が混じると部品が壊れることがあるので、文字単位で分けるときは[...s]のほうが安全です。
• split・trim・toUpperCaseはどれも新しい値を返します。元の文字列はそのままです。
• 行単位で分けるときはsplit("\n")を使います。Windowsで作ったファイルは行末に見えない文字がもう一つついていることがあるので、分けたあとで各行をtrim()するほうが安全です。

5.置き換え — `replace`と`replaceAll`

s.replace("探す語", "置き換える語")は、最初に現れる一つだけを置き換えます。すべて置き換えるにはreplaceAllを使います。この違いのせいで「なぜ最初の一つしか変わらないのか」ということがよく起きるので、置き換えのコードを書いたら、同じ語が二回以上出てくる入力で必ず試してください。どちらのメソッドも元の文字列はそのままにして、置き換えた新しい文字列を返します。

置き換えは「削除」にも使えます。置き換える語に空文字列""を渡すと、見つかった部分が消えます。たとえば"090-1234-5678".replaceAll("-", "")は"09012345678"です。逆に、数字だけの電話番号にハイフンを入れたいなら、sliceで切り出してjoinでつなぐほうがすっきりします。どんな作業でも元のデータはそのままにして新しい値を作るので、処理の前後を並べて比べやすくなります。

const s = "りんご-なし-りんご";
console.log(s.replace("りんご", "みかん"));
console.log(s.replaceAll("りんご", "みかん"));
console.log(s);

みかん-なし-りんご
みかん-なし-みかん
りんご-なし-りんご

const raw = "090-1234-5678";
const digits = raw.replaceAll("-", "");
console.log(digits);
const parts = [
  digits.slice(0, 3),
  digits.slice(3, 7),
  digits.slice(7),
];
console.log(parts.join("-"));

09012345678
090-1234-5678

6.正規表現の入り口 — 形で探す

ここまでは「この語そのもの」を探してきました。「数字が続いている部分」「空白がいくつも続いているところ」のように形で探したいときに使うのが正規表現です。JavaScriptでは二つの/の間にパターンを書き、後ろにつけるgは「最初の一つではなく全部」という意味です。正規表現はそれ自体が小さな言語なので、ここではよく使ういくつかを読める程度に見ておきます。

\dは数字1文字、\sは空白1文字（空白・タブ・改行）で、後ろにつく+は「一つ以上続いた」という意味です。つまり/\d+/gは「続いた数字のかたまり全部」、/\s+/gは「続いた空白全部」です。matchは見つかったかたまりを配列で返し、一つもなければ空の配列ではなくnullを返す点に注意してください。testは見つかったかどうかだけをtrue/falseで教えてくれます。

正規表現は強力ですが読みにくく、少し間違えるだけで思わぬところに当たったり、当たるべきところが漏れたりします。原則は二つです。まず、includes・split・replaceAllでできることはそれで済ませ、正規表現はどうしても必要なときだけ使います。そして、AIが作ってくれた正規表現でも自分で書いたものでも、当たるべき例と当たってはいけない例をいくつも入れて、正規表現テスターで確かめてから使います。

const memo = "注文 3個、返品 12個";
console.log(memo.match(/\d+/g));
console.log("数字なし".match(/\d+/g));
console.log(/\d/.test(memo));

[ '3', '12' ]
null
true

const messy = "  りんご   なし  みかん ";
const clean = messy.trim().replace(/\s+/g, " ");
console.log("[" + clean + "]");
const masked = "090-1234-5678".replace(/\d/g, "*");
console.log(masked);

[りんご なし みかん]
***-****-****