JavaScript 文字列操作 一覧｜全メソッド早見表とNode 22実行結果

JavaScriptの文字列操作は、String のメソッド（includes・slice・replaceAll・split・padStart など）と、テンプレートリテラル、配列の join、Intl（国際化API）の組み合わせで書けます。 文字列は変更できない値（イミュータブル）なので、どのメソッドも元の文字列を変えずに新しい文字列を返します。

この記事では、String.prototype の全メソッドを目的別の索引つきで一覧化し、主要なものをNode.js 22（v22.22.2）で実際に実行した出力つきで紹介します。さらに、絵文字で length がずれる、replace は最初の1つしか置換しない、sort で日本語が五十音順にならない、といったつまずきやすい動きと、そのままコピペで使えるユーティリティ関数集（全角半角変換・カンマ区切り・HTMLエスケープなど）もまとめました。正規表現の書き方そのものは「正規表現 早見表」の記事で詳しく扱っています。

JavaScript 文字列操作の早見表（目的別索引）

String メソッド全一覧（目的別）

Node.js 22 で Object.getOwnPropertyNames(String.prototype) を実行して得たメソッドを、目的別に分類しました。 導入年はECMAScriptの版です。MDNで非推奨とされているものは最後にまとめています。

あわせて使うもの：テンプレートリテラル（`${}`）、Array.prototype.join、比較用の Intl.Collator、文字の区切りを判定する Intl.Segmenter、数値整形の Intl.NumberFormat です。

文字列を検索する・一部を取り出す

「含むか」だけなら includes、位置が必要なら indexOf、パターンで探すなら match / matchAll を使います。取り出しは slice が基本で、末尾から数えるときは負の数を渡します。

const s = "order-2026-09-A12.csv";
// 検索
console.log(s.includes("2026"));
console.log(s.indexOf("-"), s.lastIndexOf("-"), s.indexOf("xyz"));
console.log(s.startsWith("order"), s.endsWith(".csv"), s.startsWith("2026", 6));
console.log(s.search(/\d/));              // 正規表現で最初の位置
console.log(s.match(/\d+/));              // g なし：最初の1件＋詳細
console.log(s.match(/\d+/g));             // g あり：全件の配列
console.log(s.match(/zzz/g));             // 見つからないと null
for (const m of s.matchAll(/(\d{4})-(\d{2})/g)) {
  console.log(m[0], m[1], m[2], m.index);
}
// 取り出し
console.log(s.slice(6, 10), s.slice(-3), s.slice(-7, -4));
console.log(s.substring(6, 10), s.substring(10, 6)); // substring は引数を入れ替える
console.log(s.slice(10, 6) === "");                  // slice は空文字
console.log(s.at(0), s.at(-1), s[0], s.at(99), s[99]);

実行結果（Node.js 22）：

true
5 13 -1
true true true
6
[ '2026', index: 6, input: 'order-2026-09-A12.csv', groups: undefined ]
[ '2026', '09', '12' ]
null
2026-09 2026 09 6
2026 csv A12
2026 2026
true
o v o undefined undefined

match は見つからないと null を返すため、s.match(re).length のように続けて書くとエラーになります。s.match(re) ?? [] のように既定値を付けると安全です。

文字列を置換する（replace と replaceAll の違い）

replace に文字列を渡すと最初の1件だけを置換します。 全件を置換するなら replaceAll を使うか、正規表現に g フラグを付けます。

const s = "a.b.c";
console.log(s.replace(".", "-"));          // 最初の1つだけ
console.log(s.replaceAll(".", "-"));       // 全部（文字列はそのまま扱う）
console.log(s.replace(/\./g, "-"));        // 正規表現 + g でも全部
console.log("2026-09-28".replace(/(\d+)-(\d+)-(\d+)/, "$1年$2月$3日"));
console.log("2026-09-28".replace(/(?<y>\d+)-(?<m>\d+)-(?<d>\d+)/, "$<m>/$<d>/$<y>"));
console.log("item_count".replace(/_(\w)/g, (_, c) => c.toUpperCase())); // 関数で置換
// 置換後の文字列の $ に注意
console.log("価格: PRICE".replace("PRICE", "$&!"));        // $& はマッチした文字列
console.log("価格: PRICE".replace(/(PRICE)/, "$100"));     // $1 + "00" と解釈される
console.log("価格: PRICE".replace("PRICE", "$$100"));      // $ を出すには $$
console.log("価格: PRICE".replace("PRICE", () => "$100")); // 関数の戻り値はそのまま
try {
  "a.b".replaceAll(/\./, "-");
} catch (e) {
  console.log(e.constructor.name + ": " + e.message);
}

実行結果（Node.js 22）：

a-b.c
a-b-c
a-b-c
2026年09月28日
09/28/2026
itemCount
価格: PRICE!
価格: PRICE00
価格: $100
価格: $100
TypeError: String.prototype.replaceAll called with a non-global RegExp argument

置換後の文字列がユーザー入力など中身のわからない値なら、関数 () => 値 で渡すと $ が特別扱いされません。replaceAll に g なしの正規表現を渡すと TypeError になる点も覚えておくと便利です。

文字列を分割する・結合する

split は区切り文字で配列に、配列の join は区切り文字で文字列に戻します。 変数の埋め込みはテンプレートリテラル（バッククォートで囲む書き方）が読みやすく書けます。

console.log("ペン,ノート,,付箋,".split(","));      // 末尾の空文字も残る
console.log("ペン,ノート,付箋".split(",", 2));     // 最大2個（残りは捨てる）
console.log("abc".split(""), "".split(","), "".split(""));
console.log("  注文   在庫 タスク ".trim().split(/\s+/));
console.log("1+2-3".split(/([+-])/));              // キャプチャで区切りも残す
console.log("21.0.10".split("."));                 // 文字列指定なら . はそのまま
const items = ["ペン", "ノート", "付箋"];
console.log(items.join(", "), [1, null, undefined, 2].join("-"));
console.log("id-".concat(42, "-", true));
const n = 3;
console.log(`備品は${n}点、合計${n * 120}円`);
console.log(String.raw`C:\temp\new`);               // \ をエスケープしない

実行結果（Node.js 22）：

[ 'ペン', 'ノート', '', '付箋', '' ]
[ 'ペン', 'ノート' ]
[ 'a', 'b', 'c' ] [ '' ] []
[ '注文', '在庫', 'タスク' ]
[ '1', '+', '2', '-', '3' ]
[ '21', '0', '10' ]
ペン, ノート, 付箋 1---2
id-42-true
備品は3点、合計360円
C:\temp\new

Javaの split と違い、JavaScriptの split は文字列を渡せば文字どおりに分割し、末尾の空文字も残ります。 limit は「最大個数」で、残りは捨てられます。join では null と undefined が空文字になります。

整形する（空白除去・パディング・大文字小文字）

trim は全角スペースや改行も除去します。 ゼロ埋めは padStart、繰り返しは repeat を使います。

const s = "　 在庫あり \n";           // 先頭に全角スペース、末尾に改行
console.log(JSON.stringify(s.trim()), JSON.stringify(s.trimStart()), JSON.stringify(s.trimEnd()));
console.log("Order-Id".toUpperCase(), "Order-Id".toLowerCase());
console.log("TITLE".toLocaleLowerCase("tr"), "i".toLocaleUpperCase("tr"));  // トルコ語
console.log("ｊａｖａ".toUpperCase(), "straße".toUpperCase());              // 長さが変わることも
console.log("42".padStart(5, "0"), "[" + "ab".padEnd(5) + "]", "abcdef".padStart(3, "0"));
console.log(String(7).padStart(3, "0"), "=".repeat(10));
try { "a".repeat(-1); } catch (e) { console.log(e.constructor.name + ": " + e.message); }

実行結果（Node.js 22）：

"在庫あり" "在庫あり \n" "　 在庫あり"
ORDER-ID order-id
tıtle İ
ＪＡＶＡ STRASSE
00042 [ab   ] abcdef
007 ==========
RangeError: Invalid count value: -1

padStart は元の文字列が指定の長さ以上なら何もしません（"abcdef" はそのまま）。toUpperCase はドイツ語の ß が SS になるなど、変換後に長さが変わることがあります。

比較・並べ替え（sort の日本語順）

配列の sort() は引数なしだとUTF-16の値の順に並べるため、ひらがなとカタカナが分かれ、数字も文字として比べます。 日本語や「item2 と item10」を自然な順に並べるには localeCompare か Intl.Collator を使います。

const fruits = ["いちご", "アボカド", "かき", "オレンジ"];
console.log([...fruits].sort());
console.log([...fruits].sort((a, b) => a.localeCompare(b, "ja")));
console.log(["item10", "item2", "item1"].sort());
const coll = new Intl.Collator("ja", { numeric: true });
console.log(["item10", "item2", "item1"].sort(coll.compare));
console.log("10" < "9", "B" < "a");
console.log("a".localeCompare("A", "ja", { sensitivity: "base" })); // 大小を無視すると 0（等しい）

実行結果（Node.js 22）：

[ 'いちご', 'かき', 'アボカド', 'オレンジ' ]
[ 'アボカド', 'いちご', 'オレンジ', 'かき' ]
[ 'item1', 'item10', 'item2' ]
[ 'item1', 'item2', 'item10' ]
true true
0

大量の要素を並べるときは Intl.Collator を1回作って compare を渡すと、毎回 localeCompare を呼ぶより効率的です。sort() は元の配列を並べ替えるため、上の例ではコピー（[...fruits]）してから並べています。

数値と文字列を変換する

文字列 → 数値は Number()（全体が数値でないと NaN）と parseInt(s, 10)（先頭から読めるところまで）で結果が違います。

console.log(Number("42"), Number(""), Number(" 12 "), Number("12a"), Number("1e3"));
console.log(parseInt("12a", 10), parseInt("0x1f"), parseFloat("3.14円"));
console.log(Number("１２"), Number("１２".normalize("NFKC")));  // 全角数字
console.log(String(3.0), (255).toString(16), (3.14159).toFixed(2));
console.log((1234567.891).toLocaleString("ja-JP"), (0.1 + 0.2).toString());
console.log(new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(1234567));
console.log(String(null), `${[1, 2]}`, `${{}}`);

実行結果（Node.js 22）：

42 0 12 NaN 1000
12 31 3.14
NaN 12
3 ff 3.14
1,234,567.891 0.30000000000000004
￥1,234,567
null 1,2 [object Object]

フォーム入力の空欄を Number("") で変換すると0になるため、未入力を区別したいときは先に s.trim() === "" を判定します。parseInt は第2引数（基数）に 10 を明示しておくと読み手に意図が伝わります。

文字数を数える（絵文字・サロゲートペアで length がずれる）

length は「UTF-16のコード単位の数」で、見た目の文字数とは限りません。 「𠮷」や絵文字は2単位、家族の絵文字のように複数の絵文字をつないだものは8単位になります。見た目の文字数は Intl.Segmenter で数えます（Node.js 16 以降、主要ブラウザで利用可）。

const seg = new Intl.Segmenter("ja", { granularity: "grapheme" });
for (const s of ["あいう", "𠮷野家", "👍", "👨‍👩‍👧"]) {
  console.log(s, "length=" + s.length, "[...s]=" + [...s].length,
    "grapheme=" + [...seg.segment(s)].length,
    "bytes=" + new TextEncoder().encode(s).length);
}
const s = "𠮷野家";
console.log(s.slice(0, 1) === "𠮷", [...s].slice(0, 1).join(""));
console.log(s.codePointAt(0).toString(16), String.fromCodePoint(0x20bb7));
console.log(s.split("").length, [...s].reverse().join(""));
// 壊れた文字列（片割れのサロゲート）の検出と修復
const broken = s.slice(0, 1);
console.log(broken.isWellFormed(), s.isWellFormed());
console.log(encodeURIComponent(broken.toWellFormed()));
try { encodeURIComponent(broken); } catch (e) { console.log(e.constructor.name + ": " + e.message); }
// 正規化：見た目が同じでも別の並び
const a = "が";                                  // 1文字（U+304C）
const b = "か" + String.fromCodePoint(0x3099);   // か＋結合用の濁点（U+3099）
console.log(a === b, a.length, b.length, a === b.normalize("NFC"));
console.log("ｶﾞｷﾞ①ＡＢＣ１２３".normalize("NFKC"));

実行結果（Node.js 22）：

あいう length=3 [...s]=3 grapheme=3 bytes=9
𠮷野家 length=4 [...s]=3 grapheme=3 bytes=10
👍 length=2 [...s]=1 grapheme=1 bytes=4
👨‍👩‍👧 length=8 [...s]=5 grapheme=1 bytes=18
false 𠮷
20bb7 𠮷
4 家野𠮷
false true
%EF%BF%BD
URIError: URI malformed
false 1 2 true
ガギ1ABC123

slice(0, 1) や split("") はサロゲートペアを半分に切ります。 半端な文字列は encodeURIComponent で URIError になるため、外部から来た文字列は isWellFormed() で確認し、必要なら toWellFormed() で置換文字（U+FFFD）に直します。また、ファイル名やmacOS由来の文字列では「が」が2文字（か＋濁点）になっていることがあるため、比較前に normalize("NFC") をかけると一致します。

よくある落とし穴のまとめ

よく使うユーティリティ関数集（コピペ用）

実務でよく書く文字列処理を関数にまとめました。 依存ライブラリなしでNode.js 22とモダンブラウザで動きます。

// 全角英数字・記号 → 半角（U+FF01〜U+FF5E を 0xFEE0 ずらす）
const toHalfWidth = (s) =>
  s.replace(/[！-～]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xfee0)).replace(/　/g, " ");
// 半角英数字・記号 → 全角
const toFullWidth = (s) =>
  s.replace(/[!-~]/g, (c) => String.fromCharCode(c.charCodeAt(0) + 0xfee0)).replace(/ /g, "　");
// ひらがな ⇔ カタカナ（0x60 ずらす）
const hiraToKata = (s) => s.replace(/[ぁ-ゖ]/g, (c) => String.fromCharCode(c.charCodeAt(0) + 0x60));
const kataToHira = (s) => s.replace(/[ァ-ヶ]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60));
// 3桁カンマ区切り・ゼロ埋め・先頭だけ大文字
const withComma = (n) => n.toLocaleString("ja-JP");
const zeroPad = (n, width) => String(n).padStart(width, "0");
const capitalize = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
// camelCase ⇔ snake_case
const toSnake = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
const toCamel = (s) => s.replace(/[_-](\w)/g, (_, c) => c.toUpperCase());
// HTML エスケープ
const escapeHtml = (s) =>
  s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
// 正規表現エスケープ（ユーザー入力で検索するとき）
const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
// 出現回数
const countOf = (s, word) => (word ? s.split(word).length - 1 : 0);
// 見た目の文字数で切り詰め・反転（絵文字を壊さない）
const seg = new Intl.Segmenter("ja", { granularity: "grapheme" });
const graphemes = (s) => [...seg.segment(s)].map((x) => x.segment);
const truncate = (s, max, tail = "…") => {
  const g = graphemes(s);
  return g.length <= max ? s : g.slice(0, max).join("") + tail;
};
const reverse = (s) => graphemes(s).reverse().join("");

console.log(toHalfWidth("ＡＢＣ　１２３！＠"));
console.log(toFullWidth("ABC 123!@"));
console.log(hiraToKata("ありがとう"), kataToHira("タスクボード"));
console.log(withComma(1234567), zeroPad(42, 5), capitalize("hello"));
console.log(toSnake("orderItemId"), toCamel("order_item_id"), toCamel("order-item-id"));
console.log(escapeHtml(`<a href="x">Tom & 'Jerry'</a>`));
console.log(escapeRegExp("1+1=2?"), new RegExp(escapeRegExp("1+1")).test("式: 1+1"));
console.log(countOf("在庫・在庫・発注", "在庫"));
console.log(truncate("👨‍👩‍👧家族で在庫確認", 4), truncate("短い", 4));
console.log(reverse("A👨‍👩‍👧B"), [..."A👨‍👩‍👧B"].reverse().join("") === reverse("A👨‍👩‍👧B"));

実行結果（Node.js 22）：

ABC 123!@
ＡＢＣ　１２３！＠
アリガトウ たすくぼーど
1,234,567 00042 Hello
order_item_id orderItemId orderItemId
<a href="x">Tom & 'Jerry'</a>
1\+1=2\? true
2
👨‍👩‍👧家族で… 短い
B👨‍👩‍👧A false

全角半角の変換は、英数字だけなら normalize("NFKC") でも可能です。ただしNFKCは「①」→「1」、半角カナ→全角カナなども同時に変換するため、英数字と記号だけを変換したいときは上の toHalfWidth のように範囲を限定すると意図どおりになります。

よくある質問

Q. slice と substring はどちらを使えばよいですか？ A. 基本は slice がおすすめです。 負の数で末尾から数えられ、配列の slice と同じ感覚で使えます。substring は負の数を0として扱い、開始と終了が逆なら入れ替える点が異なります。

Q. replace で全部置換されないのはなぜですか？ A. 文字列を渡した replace は最初の1件だけを置換する仕様です。 replaceAll("a", "b") を使うか、replace(/a/g, "b") のように正規表現に g フラグを付けてください。

Q. 絵文字を含む文字列の文字数を正しく数えるには？ A. [...new Intl.Segmenter("ja", { granularity: "grapheme" }).segment(s)].length で数えます。[...s].length はコードポイント数なので、家族の絵文字のような結合された絵文字は複数に数えられます。

Q. substr は使ってもよいですか？ A. 動作はしますが非推奨（MDN）なので、新しいコードでは slice を使います。 s.substr(開始, 長さ) は s.slice(開始, 開始 + 長さ) に置き換えられます。

まとめ

• 文字列のメソッドは元の文字列を変えず、新しい文字列を返す
• 検索は includes / indexOf、取り出しは slice と at が基本
• replace に文字列を渡すと最初の1件だけ。全件は replaceAll か g フラグ
• length はUTF-16の単位数。見た目の文字数は Intl.Segmenter で数える
• 日本語の並べ替えは localeCompare(b, "ja") / Intl.Collator
• Number("") は0、parseInt("12a") は12。入力値の変換は結果の違いを押さえて選ぶ
• 全角半角・HTMLエスケープなどはユーティリティ関数にまとめて再利用する

株式会社RJCでは、言語の細かな動きを実際に動かして確かめ、その結果をプロジェクトの中で仲間と共有しています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。