JavaScript入門：String（文字列）とは
文字列は「テキスト」を表すデータ型です。名前、メッセージ、ID、JSONなど、あらゆる場面で使います。作り方、扱い方、よく使うメソッドを例付きでかみ砕いて解説します。
基本の作り方と特徴
- 文字列リテラル: シングル、ダブル、バッククォートで囲む
const a = "Hello"; // ダブル
const b = 'World'; // シングル
const c = `Hi`; // バッククォート（テンプレート）
- テンプレートリテラル: 変数や式を埋め込める（改行もOK）
const name = "Taro";
console.log(`Hello, ${name}!`); // Hello, Taro!
console.log(`1+2=${1+2}`); // 1+2=3
const msg = `Line1
Line2`; // 複数行
- イミュータブル（不変）: 文字列は「中身を直接書き換えられない」
let s = "cat";
// s[0] = "C"; // これは変わらない
s = "Cat"; // 新しい文字列を再代入する
エスケープと長さ・アクセス
- エスケープシーケンス: 特殊文字の書き方
const path = "C:\\Users\\Taro"; // バックスラッシュ
const quote = "He said: \"Hi\""; // ダブルクォート
const lines = "A\nB\tC"; // 改行/タブ
- 長さとインデックスアクセス: 0始まり
const str = "JavaScript";
console.log(str.length); // 10
console.log(str[0]); // 'J'
console.log(str.charAt(1)); // 'a'
部分取得・検索・判定
- 部分取得（slice/substring）: よく使うのは slice
const s = "abcdef";
console.log(s.slice(2, 5)); // "cde"（2以上5未満）
console.log(s.slice(-2)); // "ef"（末尾から）
console.log(s.substring(2,5)); // "cde"（負数は0扱い）
- 検索（indexOf/includes）：
const t = "Hello World";
console.log(t.indexOf("World")); // 6（見つからなければ -1）
console.log(t.includes("World")); // true（存在だけ知りたいならこれ）
- 先頭・末尾（startsWith/endsWith）：
console.log("file.js".startsWith("file")); // true
console.log("file.js".endsWith(".js")); // true
変換・置換・分割・結合
- 大文字/小文字変換: 検索前の正規化に便利
console.log("abc".toUpperCase()); // "ABC"
console.log("ABC".toLowerCase()); // "abc"
- トリミング（前後の空白削除）：
console.log(" hello ".trim()); // "hello"
console.log(" hi".trimStart()); // "hi"
console.log("bye ".trimEnd()); // "bye"
- 置換（replace/replaceAll）：
console.log("I like cats".replace("cats","dogs")); // "I like dogs"
console.log("a,a,a".replaceAll("a","b")); // "b,b,b"
// 正規表現で柔軟に
console.log("Foo foo".replace(/foo/ig, "bar")); // "bar bar"
- 分割と結合（split/join）：
const csv = "red,green,blue";
const arr = csv.split(","); // ["red","green","blue"]
const joined = arr.join(" | "); // "red | green | blue"
- 繰り返し・桁埋め（repeat/padStart/padEnd）：
console.log("ha".repeat(3)); // "hahaha"
console.log("7".padStart(3,"0")); // "007"
console.log("x".padEnd(5,"_")); // "x____"
よくある落とし穴とユニコードの注意
- 文字列は不変: 変更時は新しい文字列を作る（性能・意図を意識）
- 数値との結合で型が変わる: + は「文字列結合」にも使われる
console.log("1" + 2); // "12"（文字列結合）
console.log(Number("1") + 2); // 3（数値化してから計算）
- 絵文字や結合文字: 1文字が「見た目上2コードユニット」になることがある
const emoji = "😊";
console.log(emoji.length); // 2（サロゲートペア）
- 対策のヒント: 文字単位で扱いたいときは
Array.from(str)やfor...ofを使う
for (const ch of "😊a") console.log(ch); // "😊", "a"
ミニ練習
- 問1: 入力の前後空白を取り除いて「Hello, 名前!」を出力
const name = " Taro ";
console.log(`Hello, ${name.trim()}!`); // Hello, Taro!
- 問2: ファイル名から拡張子「.js」を判定
const file = "app.min.js";
console.log(file.endsWith(".js")); // true
- 問3: 「2025-12-09」を「2025/12/09」に置換
const date = "2025-12-09";
console.log(date.replaceAll("-","/")); // 2025/12/09
- 問4: 「a,b,c」を配列にし、区切り文字を「 | 」で再結合
const s = "a,b,c";
console.log(s.split(",").join(" | ")); // a | b | c
まとめ
- 作り方: リテラルとテンプレートで柔軟に。エスケープも覚える。
- 取得・検索:
slice/includes/indexOf/startsWith/endsWithを使い分ける。 - 整形:
toUpperCase/toLowerCase/trim/replace/split/joinが基本セット。 - 不変性: 文字列は書き換え不可。必要なときは新しい文字列を作る。
- ユニコード: 絵文字は長さに注意。
for...ofやArray.fromが役立つ。
この基礎が身につけば、入力の整形、検索・置換、表示の整備まで難なくこなせます。次は「正規表現（RegExp）」を組み合わせて、より高度な文字列処理に挑戦してみましょう。