JavaScript文字列メソッド早見表（ライブ実行）

JavaScript文字列メソッド早見表

JavaScript文字列メソッド早見表（結果をライブ表示） | We.Inc

自分のテキストを入力すると、slice、split、正規表現を使った置換、padStart、trimなど、よく使うJavaScriptの文字列メソッドの結果をその場で確認できます。入力チェック用のヘルパー関数もコピーできます。

JavaScriptの文字列には、検索（includes、indexOf、startsWith）、切り出し（slice、substring、split）、大文字小文字の変換、空白の除去、埋め込み、置換のための組み込みメソッドがあります。どのメソッドも元のテキストは変更しません。文字列はイミュータブルなので、各メソッドは新しい値を返します。下に好きなテキストを入力すると、編集に合わせてすべてのメソッドが実行される様子を確認できます。

特によく使われるメソッド

やりたいこと
メソッド
結果の例

単語が含まれているか
"web site".includes("site")

最初の3文字
"website".slice(0, 3)
"web"

最後の1文字
"website".at(-1)

単語を配列にする
"a b c".split(" ")

一致する箇所をすべて置換
"a-b-c".replaceAll("-", "/")

数値をゼロで埋める
"7".padStart(3, "0")

メソッドの一覧を読めば名前はわかりますが、自分のテキストで実行してみると動作がわかります。下のライブ早見表は入力した内容に各メソッドを適用するので、負のインデックス、空文字列、連続する空白といった特殊なケースがすぐに見えてきます。その後には、正規表現による置換と、フォームに貼り付けて使える小さな入力チェック用の関数を紹介します。

入力欄にテキストを入力するか貼り付けます。入力に合わせて、ライブ早見表のすべての行が再計算されます。
名前や、検索、変換といったグループで行を絞り込み、目的のメソッドをすばやく見つけます。
正規表現のパターンと置換後の文字列を編集し、キャプチャグループを使った置換を自分のテキストで試します。
さらに下にある、空白の除去、スラッグ、タイトルケース、メールアドレスのチェック用のヘルパー関数をコピーします。

substrよりsliceを使いましょう。MDNではsubstrが非推奨とされており、sliceなら末尾から数える負の位置も指定できます。
正規表現を使うreplaceAllにはgフラグが必要で、付けないとTypeErrorが発生します。
名前を並べ替えるときはlocaleCompareを使うと、アクセント記号や大文字小文字が読み手の期待どおりの順に並びます。
lengthはUTF-16のコード単位を数えるため、絵文字1つで長さが2になることがあります。コードポイントを数えるには、文字列を展開して配列にしましょう。
各呼び出しは新しい文字列を返すので、メソッドチェーンも問題ありません：text.trim().toLowerCase().replaceAll(" ", "-")。

よくある質問

sliceとsubstringの違いは何ですか？

どちらも、開始インデックスから終了インデックスまでの部分文字列を切り出します。sliceは負の数を末尾から数えるため、slice(-3)は最後の3文字を返します。substringは負の数をゼロとして扱い、開始が終了より大きい場合は引数を入れ替えます。

文字列内のすべての一致箇所を置換するには？

普通のテキストならreplaceAll("old", "new")を使うか、text.replace(/old/g, "new")のようにグローバルな正規表現でreplaceを使います。replaceに普通の文字列を渡すと、最初の一致箇所しか変わりません。

置換でキャプチャグループを使うには？

パターンの一部を丸かっこで囲み、置換文字列の中で$1、$2として参照します。(?<year>\d{4})のように書いた名前付きグループは$<year>で参照し、$&は一致した全体を挿入します。

文字列が有効なメールアドレスかどうかを確認するには？

シンプルなパターンで明らかな入力ミスは見つけられますが、メールアドレスのルールに完全に一致する正規表現はありません。ブラウザーで最も信頼できる確認方法は、HTML標準のパターンが適用されるtype="email"の入力欄を使い、その後に確認メッセージを送ることです。

文字列メソッドは元の変数を変更しますか？

いいえ。文字列の値は作成後に変更できません。toUpperCaseのようなメソッドは新しい文字列を返すので、name = name.toUpperCase()のように結果を代入する必要があります。

インデックス、負の数、文字

位置は0から始まります。at()とslice()は末尾から数える負の数を受け付けますが、charAt()や角かっこによるアクセスは受け付けません。そのため、最後の文字を取り出すにはtext.at(-1)がすっきりした書き方です。
JavaScriptはテキストをUTF-16で保存します。ほとんどの文字は1単位ですが、絵文字や一部の文字体系は2単位を使うため、length、slice、charAtがそうした文字を半分に分割してしまうことがあります。Array.from(text)やfor...ofループを使えば、実際のコードポイント単位で処理できます。

返す値が異なる検索メソッド

includes、startsWith、endsWithは真偽値を返します。indexOfとlastIndexOfは位置または-1を返します。searchは正規表現を受け取り、同じく位置を返します。matchは一致した結果を返し、matchAllはグループを含むすべての一致のイテレーターを返します。
次の行で何が必要かによって選びましょう。はいかいいえで分岐するだけなら、インデックスを-1と比較するより、真偽値を返すメソッドのほうが読みやすくなります。

ユーザーの入力を整える

貼り付けられたテキストの両端には空白や改行が含まれていることが多いため、検証の前に空白を除去しましょう。比較の前には大文字小文字をそろえ、連続する空白はreplace(/\s+/g, " ")でまとめます。
ブラウザーでの検証は訪問者の利便性のためのものです。リクエストはページを経由せずに送ることもできるので、サーバーでも同じチェックを行いましょう。

正規表現で置換する

正規表現による置換では、固定のテキストではなくパターンで一致させたり、キャプチャグループで順序を入れ替えたり、関数で置換後の内容を計算したりできます。

置換文字列の中で使える特殊なパターン

パターン
挿入される内容

一致した全体

番号付きキャプチャグループのテキスト

$<name>
名前付きキャプチャグループのテキスト

ドル記号そのもの

繰り返し使える正規表現の置換パターン

各行はそれぞれ単独で動きます。関数を使う形なら一致箇所ごとに変換でき、ここでは各単語の最初の文字を大文字にしています。

入力チェックと整形のヘルパー

スラッグ、タイトルケース、切り詰め、簡単なメールアドレスのチェック

フォームやURL向けの、依存関係のない小さな関数です。メールアドレスのチェックは明らかな間違いを見つけるだけなので、アドレスはメッセージを送って確認しましょう。

避けるべきメソッド

MDNで非推奨とされている古いメソッド

メソッド
代わりに使うもの

substr(start, length)
slice(start, start + length)

anchor()、bold()、link()などのHTMLラッパーメソッド
DOMで要素を作成し、textContentを設定する

調べる

UTF-16のコード単位の数

調べる

指定位置の文字。負の数は末尾から数える

調べる

最後の文字

調べる

指定位置の文字。範囲外なら空文字列

調べる

指定位置のUTF-16コード単位の番号

検索

テキストがどこかに含まれていればtrue

検索

文字列がそのテキストで始まればtrue

検索

文字列がそのテキストで終わればtrue

検索

テキストが最初に現れる位置、または-1

検索

テキストが最後に現れる位置、または-1

検索

正規表現に最初に一致した位置、または-1

検索

グローバルな正規表現に一致したすべての結果の配列

切り出す

2つの位置の間の部分

切り出す

最後の5文字

切り出す

2つの位置の間の部分。負の数は使えない

切り出す

区切り文字で分割した断片の配列

変換

すべての文字を大文字に変換する

変換

すべての文字を小文字に変換する

変換

文字列の両端にある空白を取り除く

変換

文字列の先頭にある空白を取り除く

変換

文字列の末尾にある空白を取り除く

変換

指定の長さまで先頭を埋める

変換

指定の長さまで末尾を埋める

変換

文字列をn回つなげたもの

変換

最初に一致した箇所だけを置換する

変換

一致したすべての箇所を置換する

変換

文字列を連結する。+でも同じ

変換

Unicodeの正規化形式。比較の前に便利

比較

並び順を表す負の数、0、または正の数

すべて

文字列メソッドのライブ早見表

テキストを入力すると、編集に合わせて下のすべてのメソッドが実行されます。

あなたのテキスト（str）

メソッドを絞り込む

例：padやtrim

メソッドのグループ

グループ別の文字列メソッド（{n}件を表示）

呼び出し

グループ

動作

結果

正規表現の置換を試す

パターン、フラグ、置換後の文字列を編集して、自分のテキストで試せます。

テキスト

パターン

フラグ

置換後の文字列

無効なパターンです：{msg}

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

JavaScript文字列メソッド早見表（ライブ実行）