JavaScript 逆引き集 | 文字列を大文字／小文字

JavaScript JavaScript
スポンサーリンク

JavaScript文字列の大文字・小文字変換の基本と実践

文字列を「全部大文字」「全部小文字」に揃えたいときは、toUpperCase と toLowerCase が最短ルート。検索や比較、表示整形で頻出です。

構文とポイント

const upper = s.toUpperCase(); // 全部大文字
const lower = s.toLowerCase(); // 全部小文字
JavaScript
  • 返り値: 新しい文字列（元の文字列は変わらない）
  • 対象: 英字にのみ影響（数字・記号は変化しない）
  • 用途: ケース無視の比較、ユーザー入力の正規化、表示ルールの統一

すぐ使えるテンプレート集

基本：全部大文字・全部小文字

const s = "Hello World!";
console.log(s.toUpperCase()); // "HELLO WORLD!"
console.log(s.toLowerCase()); // "hello world!"
JavaScript
  • ポイント: 比較前に揃えるのが定番。

ケース無視で比較（検索にも）

const query = "tokyo";
const city = "Tokyo";

const isMatch = query.toLowerCase() === city.toLowerCase();
console.log(isMatch); // true
JavaScript
  • ポイント: 比較対象を同じケースへ正規化してから比べる。

配列の文字列を揃える（表示用）

const names = ["Aki", "Mao", "Ren"];
const display = names.map(n => n.toUpperCase()).join(", ");
console.log(display); // "AKI, MAO, REN"
JavaScript
  • ポイント: mapで一括整形→joinで結合。

前後の空白を削ってから小文字化（入力クリーニング）

const input = "  JS Master  ";
const normalized = input.trim().toLowerCase();
console.log(normalized); // "js master"
JavaScript
  • ポイント: trim→ケース統一で安定した比較ができる。

実務で便利な拡張

先頭だけを大文字（見出し風タイトルケースの簡易版）

function capitalize(word) {
  const s = word.trim();
  return s ? s[0].toUpperCase() + s.slice(1).toLowerCase() : "";
}

console.log(capitalize("jAVAsCript")); // "Javascript"
JavaScript
  • ポイント: 完全な英語タイトルケースは例外が多いので、まずは「先頭だけ大文字＋残り小文字」から。

単語ごとにタイトルケース（簡易）

function toTitleCase(str) {
  return str
    .trim()
    .split(/\s+/)
    .map(w => w ? w[0].toUpperCase() + w.slice(1).toLowerCase() : "")
    .join(" ");
}

console.log(toTitleCase("hello   WORLD from  JS"));
// "Hello World From Js"
JavaScript
  • ポイント: 連続空白はまとめてsplit、各単語にcapitalize。

ロケールを考慮した変換（トルコ語問題など）

// ロケール依存の大文字・小文字変換
console.log("istanbul".toLocaleUpperCase("tr")); // "İSTANBUL"
console.log("İSTANBUL".toLocaleLowerCase("tr")); // "istanbul"
JavaScript
  • ポイント: 言語特有の大小文字（例：トルコ語の i/İ）に配慮したい場合は toLocaleUpperCase / toLocaleLowerCase を使う。

よくある落とし穴と対策

  • 英字以外は変わらない: 数字・記号・ひらがな・カタカナは影響なし。
    • 対策: 大小文字変換は英字だけに期待する。別の整形が必要なら事前処理を分ける。
  • null/undefinedに対して呼ぶ: 例外が発生。
    • 対策: 型チェックまたはデフォルト値で保護（例：String(s).toLowerCase()）。
  • 全角記号・スペースの扱い: 大小変換では変わらない。
    • 対策: 必要なら trim や置換で別途処理。
  • タイトルケースの例外（英語の前置詞など）: 単純なルールでは不自然。
    • 対策: 簡易版で割り切るか、辞書ベースの処理を検討。

練習問題（手を動かして覚える）

  • ケース無視の比較: 
const a = "JavaScript";
const b = "javascript";
console.log(a.toLowerCase() === b.toLowerCase()); // true
JavaScript
  • 配列のタグを小文字に揃える: 
const tags = ["React", "Vue", "ANGULAR"];
console.log(tags.map(t => t.toLowerCase())); // ["react","vue","angular"]
JavaScript
  • タイトルを簡易タイトルケースへ: 
const title = "the quick BROWN fox";
const normalized = title
  .split(/\s+/)
  .map(w => w[0].toUpperCase() + w.slice(1).toLowerCase())
  .join(" ");
console.log(normalized); // "The Quick Brown Fox"
JavaScript
  • ロケール依存の変換（参考）: 
console.log("istanbul".toLocaleUpperCase("tr")); // "İSTANBUL"
JavaScript

直感的な指針

  • 比較前の正規化: trim → toLowerCase が鉄板。
  • 表示の統一: 一括で toUpperCase / toLowerCase、または簡易タイトルケース。
  • 言語特有の大小文字: toLocaleUpperCase / toLocaleLowerCase を検討。
スポンサーリンク
タイトルとURLをコピーしました