まず「String(文字列)」を一言でいうと
String(ストリング)は、
「文字をならべたデータを扱うための型」 です。
文章
名前
ID
メールアドレス
URL
ボタンのラベル
など、「人が読むための情報」はほぼ全部 String といっていいくらい、
プログラムの中で頻繁に出てきます。
ここが重要です。
数値を扱う Number と同じくらい、
「文字列をどう受け取って、どう組み立てて、どう表示するか」 は、JavaScript を書くうえでの土台になります。
String の基本:どう書くか、どう宣言するか
文字列リテラルの書き方(シングル・ダブル・バッククォート)
JavaScript で文字列を書くときは、
文字を "..." や '...'、または `...` で囲みます。
let name1 = "太郎";
let name2 = '花子';
let message = "こんにちは";
JavaScriptダブルクォート(")でも、シングルクォート(')でも、どちらでも構いません。
どちらも中身の型は string です。
console.log(typeof name1); // "string"
console.log(typeof name2); // "string"
JavaScriptプロジェクトごとに「基本は " を使う」「基本は ' を使う」などのスタイルが決められていることが多いです。
初心者のうちは、「どちらかに統一する」とだけ意識しておけば十分です。
テンプレートリテラル(バッククォート)とは
もう 1 つ、`...`(バッククォート)で囲む書き方があります。
let name = "太郎";
let message = `こんにちは、${name}さん`;
console.log(message); // こんにちは、太郎さん
JavaScriptこの `...` で囲んだ文字列を「テンプレートリテラル」と呼びます。
中で ${...} と書くと、その中に書かれた JavaScript の式の結果がそのまま埋め込まれます。
ここが重要です。
普通の "..." や '...' では "こんにちは、" + name + "さん" のようにプラスでつなぎますが、
テンプレートリテラルなら `こんにちは、${name}さん` のように、
「文章の中に変数をそのまま埋め込める」 のが大きな利点です。
文字列の結合(くっつける)と長さ
文字列をつなげる(結合)
文字列同士をつなげたいときは、+ 演算子を使います。
let firstName = "太郎";
let lastName = "山田";
let fullName = lastName + " " + firstName;
console.log(fullName); // 山田 太郎
JavaScript数値同士の + は足し算ですが、
片方でも文字列だと「文字列結合」になります。
let a = 10;
let b = "20";
console.log(a + b); // "1020"(数値 10 と文字列 "20" をつなげた結果)
JavaScript「足し算したかったのに結合されてしまった」というバグは初心者あるあるなので、
「+ の両側が本当に数値か」「誤って文字列が混ざっていないか」 は意識して見てください。
文字列の長さを調べる(length)
String の長さ(何文字か)は、length プロパティで取れます。
let text = "JavaScript";
console.log(text.length); // 10
JavaScript空文字(なにもない文字列)は長さ 0 です。
let empty = "";
console.log(empty.length); // 0
JavaScriptここが重要です。
入力チェックなどで「なにも入力されていないか」を確かめるときは、文字列 === "" や 文字列.length === 0 のように length を使います。
文字列の中身を読む・分解する基本操作
1文字を取り出す:インデックスアクセス
文字列の各文字には、「位置」(インデックス)が割り振られています。
最初の文字は 0、次が 1、という具合です。
let text = "ABC";
console.log(text[0]); // "A"
console.log(text[1]); // "B"
console.log(text[2]); // "C"
JavaScript存在しないインデックスを指定すると undefined になります。
console.log(text[3]); // undefined
JavaScript部分文字列を取り出す:slice
slice を使うと、文字列の一部を切り出せます。
let text = "JavaScript";
let sub1 = text.slice(0, 4); // 0文字目から4文字目の手前まで
console.log(sub1); // "Java"
let sub2 = text.slice(4); // 4文字目以降
console.log(sub2); // "Script"
JavaScriptslice(開始位置, 終了位置) で、終了位置は「その手前まで」です。
ここが重要です。slice は「文字列の一部を取り出した新しい文字列を返す」メソッドで、
元の文字列を変更しない(String は「変更不可」)という点も覚えておいてください。
文字列の検索と置き換え
部分文字列が含まれているか調べる:includes
ある文字列が含まれているかどうかは、includes で調べられます。
let text = "JavaScript";
console.log(text.includes("Script")); // true
console.log(text.includes("script")); // false(大文字小文字は区別される)
JavaScriptincludes は「含まれていれば true、そうでなければ false」を返します。
部分文字列の位置を調べる:indexOf
何文字目にその文字列が出てくるか知りたいときは、indexOf を使います。
let text = "JavaScript";
console.log(text.indexOf("Script")); // 4
console.log(text.indexOf("Java")); // 0
console.log(text.indexOf("Python")); // -1(見つからないときは -1)
JavaScript見つからないときに -1 が返るのはよく出てくるパターンなので覚えておいてください。
一部を書き換える:replace
文字列の一部を別の文字列に置き換えることもできます。
let text = "I like JavaScript";
let replaced = text.replace("JavaScript", "TypeScript");
console.log(replaced); // "I like TypeScript"
console.log(text); // "I like JavaScript"(元はそのまま)
JavaScriptreplace も slice と同じで、
元の文字列は変えずに「新しい文字列」を返す 形になります。
大文字・小文字の変換、前後の空白の削除
大文字/小文字にそろえる
文字列を全部大文字、全部小文字に変換することもよくあります。
let text = "JavaScript";
console.log(text.toUpperCase()); // "JAVASCRIPT"
console.log(text.toLowerCase()); // "javascript"
JavaScriptユーザー入力の比較などで、
「大文字小文字を区別せずに比較したい」場合に使います。
let input = "Yes";
if (input.toLowerCase() === "yes") {
console.log("はいとみなす");
}
JavaScript前後のスペースを消す:trim
文字列の前後に余計なスペースや改行が入ってしまうことがあります。
フォーム入力などで特によく起こります。
let raw = " hello \n";
console.log(raw); // 前後に空白/改行がある
console.log(raw.trim()); // "hello"
JavaScripttrim を通すと、前後の空白文字(スペース、タブ、改行など)が取り除かれます。
ここが重要です。
ユーザー入力をチェックするときには、
まず .trim() で余計な空白を落としてから、
長さや中身をチェックするのが実務では定番です。
String が「変更できない(イミュータブル)」という性質
文字列そのものは書き換えられない
JavaScript の String は「イミュータブル(不変)」です。
一度作った文字列は、中身を直接書き換えることができません。
例えば、次のようなことはできません。
let text = "Hello";
text[0] = "h"; // 無視される(エラーにはならないが変わらない)
console.log(text); // "Hello" のまま
JavaScript「変えたように見せたい」ときは、
新しい文字列を作り直す必要があります。
let text = "Hello";
text = "h" + text.slice(1);
console.log(text); // "hello"
JavaScriptここが重要です。
「String は変更不可」=「操作のたびに新しい文字列が返ってくる」
ということです。slice や replace が「元の文字列を変えない」のも、この性質によるものです。
文字列と数値の違い・変換でハマりやすいポイント
「数字っぽい文字列」と「本当の Number」
次の 2 つは、見た目は似ていますが型が違います。
let a = 10; // number
let b = "10"; // string
JavaScripttypeof で確認してみます。
console.log(typeof a); // "number"
console.log(typeof b); // "string"
JavaScript文字列の "10" に数値の 10 を足すとどうなるか。
console.log(1 + "10"); // "110"(文字列として結合される)
console.log("10" + 1); // "101"(これも結合)
console.log(10 + 20); // 30(これは number 同士なので足し算)
JavaScript数字として計算したいときは、
必ず Number に変換してから計算します。
let priceText = "1200";
let taxText = "100";
let price = Number(priceText);
let tax = Number(taxText);
console.log(price + tax); // 1300
JavaScriptここが重要です。
「見た目が数字でも、型が string だと + したときに結合になる」。
Number と String の区別は、初心者が一番最初にハマりやすいポイントなので、
入力データの型は意識的にチェックする癖をつけてください。
初心者向け:String で最低限押さえておきたいポイント
最後に、最初のうちに確実に押さえておきたい部分だけまとめます。
String は「文字(テキスト)」を扱う型で、"..."、'...'、`...` で書く。
バッククォートの `...` はテンプレートリテラルで、${変数} で埋め込みができる。
文字列の結合は + で行うが、片方が文字列だと数値も文字列に変換されて「連結」になる。
長さは .length で分かる。
中身の操作は [] で 1文字、slice で部分文字列、includes/indexOf で検索、replace で置き換えなどが基本。
大文字小文字の変換(toUpperCase / toLowerCase)、前後の空白除去(trim)は、入力処理でとてもよく使う。
String 自体は変更不可(イミュータブル)なので、操作すると「新しい文字列」が返ってくるだけで、元の文字列は変わらない。
ここが重要です。
String は「ユーザーと会話するための型」です。
入力も表示も、エラーメッセージも、画面に出るものはほとんど String。
“どうつくって、どう切り出して、どうチェックするか” を少しずつ手で書いて慣れていくと、JavaScript の楽しさが一気に広がります。
もしよければ、次のようなミニ練習をしてみてください。
名前(name)と年齢(age)を変数に入れて、
テンプレートリテラルで
私の名前は〇〇で、年齢は〇〇歳です。
という文章を 1 つの文字列として作り、console.log で出してみる。
それをやってみるだけで、
String の宣言・結合・埋め込みの一連の流れが、自分の手の感覚として掴めてくるはずです。
