😸

JavaScript 文字列操作まとめ【よく使うメソッド一覧】

に公開
JavaScript
tech

文字列（String）を扱うときに超よく使うメソッドをまとめました。
フォーム入力、検索機能、APIのデータ整形などで実務でも頻出。

toLowerCase()

文字列をすべて小文字に変換

const word = "HELLO";
console.log(word.toLowerCase()); // "hello"

よく使われる場面

  • 入力の大文字・小文字を区別せず比較したいとき
const input = "Apple";
if (input.toLowerCase() === "apple") {
  console.log("一致しました！");
}

toUpperCase()

文字列をすべて大文字に変換

const name = "apple";
console.log(name.toUpperCase()); // "APPLE"

よく使う場面

  • 英語のラベルをすべて大文字で統一したいとき（例：タグ、カテゴリー名など）

trim()

文字列の前後の余分なスペースを削除

const text = "   Hello World!   ";
console.log(text.trim()); // "Hello World!"

よく使う場面

  • フォーム入力でユーザーが空白を入れても無視したいとき
    （例：ログインフォームや検索バー）

includes()

特定の文字列を含むかを判定（true / false）

const message = "I love JavaScript!";
console.log(message.includes("love")); // true
console.log(message.includes("hate")); // false

よく使う場面

  • 検索機能や条件分岐で、キーワードが含まれているかチェックしたいとき

indexOf()

特定の文字列が最初に現れる位置（インデックス）を返す

const text = "banana";
console.log(text.indexOf("a")); // 1
console.log(text.indexOf("z")); // -1（含まれていない）

よく使う場面

  • 文字列の中で位置を取得したいとき
  • -1 を返す場合は「含まれていない」と判断できる。

startsWith()

文字列が特定の文字列で始まっているかを判定

const url = "https://zenn.dev";
console.log(url.startsWith("https")); // true
console.log(url.startsWith("http:")); // false

よく使う場面

  • URLやファイル名のチェック（例：httpsで始まるURLか確認）

slice()

文字列の一部を取り出す

const str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"
console.log(str.slice(-6));   // "Script"

よく使う場面

  • 特定の範囲だけ抜き出す
  • 日付文字列の整形など（例： "2025-11-04".slice(0, 4) → "2025"）

indexOf()との組み合わせ

indexOf()で位置を調べて、slice()でそこから切り取る

const email = "user@example.com";
const atIndex = email.indexOf("@");
console.log(email.slice(0, atIndex)); // "user"

よく使う場面

  • メールのユーザー名部分を抽出するなど

substring()

sliceと似ているが、負の値を使えない

const word = "JavaScript";
console.log(word.substring(0, 4)); // "Java"

注意点

  • sliceと違い、substring(-3) はエラーではなく0扱いされる。

replace()

最初に見つかった文字列を置き換える

const text = "I like cats. cats are cute.";
console.log(text.replace("cats", "dogs"));
// "I like dogs. cats are cute."

よく使う場面

  • テキストの一部を別の単語に置き換えたいとき（ただし最初の1箇所だけ）

replaceAll()

すべての該当部分を置き換える

const text = "I like cats. cats are cute.";
console.log(text.replaceAll("cats", "dogs"));
// "I like dogs. dogs are cute."

よく使う場面

  • 文章全体の単語を置換したいとき（例：APIレスポンスの整形など）

split()

文字列を区切り文字で分割し、配列にする

const data = "apple,banana,orange";
console.log(data.split(",")); // ["apple", "banana", "orange"]

よく使う場面

  • CSVデータやタグリストを配列に変換するとき
  • ユーザー入力を「単語ごと」に分けたいとき

String()

他の型を文字列に変換

const num = 123;
console.log(String(num)); // "123"
console.log(typeof String(num)); // "string"

よく使う場面

  • 数値や真偽値を文字列にしたいとき（例：alert()やDOM出力）

padStart()

指定した長さになるまで、先頭に文字を埋める

const num = "7";
console.log(num.padStart(3, "0")); // "007"

よく使う場面

  • 日付やIDなどをゼロ埋めしたいとき（例：001, 007）

padEnd()

指定した長さになるまで、末尾に文字を埋める

const code = "A1";
console.log(code.padEnd(5, "-")); // "A1---"

よく使う場面

  • 表示幅を揃えたいときや、テンプレート生成時など

まとめ

メソッド 目的 例 結果
toLowerCase() 小文字に変換 "HELLO" "hello"
toUpperCase() 大文字に変換 "hello" "HELLO"
trim() 前後の空白を削除 " hi " "hi"
includes() 含まれているか判定 "abc".includes("a") true
indexOf() 文字の位置取得 "banana".indexOf("a") 1
startsWith() 特定の文字で始まるか "https://..." true
slice() 文字列の一部を抜き出す "JavaScript".slice(0,4) "Java"
substring() sliceと似た部分抽出 "JavaScript".substring(0,4) "Java"
replace() 最初の1箇所置換 "cat cat".replace("cat","dog") "dog cat"
replaceAll() 全部置換 "cat cat".replaceAll("cat","dog") "dog dog"
split() 区切って配列化 "a,b,c".split(",") ["a","b","c"]
String() 型を文字列に変換 String(123) "123"
padStart() 先頭埋め "7".padStart(3,"0") "007"
padEnd() 末尾埋め "A1".padEnd(5,"-") "A1---"

Discussion