JavaScript | 基礎構文:データ型 – String

JavaScript
スポンサーリンク

まず「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"
JavaScript

slice(開始位置, 終了位置) で、終了位置は「その手前まで」です。

ここが重要です。
slice は「文字列の一部を取り出した新しい文字列を返す」メソッドで、
元の文字列を変更しない(String は「変更不可」)という点も覚えておいてください。


文字列の検索と置き換え

部分文字列が含まれているか調べる:includes

ある文字列が含まれているかどうかは、includes で調べられます。

let text = "JavaScript";

console.log(text.includes("Script")); // true
console.log(text.includes("script")); // false(大文字小文字は区別される)
JavaScript

includes は「含まれていれば 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"(元はそのまま)
JavaScript

replaceslice と同じで、
元の文字列は変えずに「新しい文字列」を返す 形になります。


大文字・小文字の変換、前後の空白の削除

大文字/小文字にそろえる

文字列を全部大文字、全部小文字に変換することもよくあります。

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"
JavaScript

trim を通すと、前後の空白文字(スペース、タブ、改行など)が取り除かれます。

ここが重要です。
ユーザー入力をチェックするときには、
まず .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 は変更不可」=「操作のたびに新しい文字列が返ってくる」
ということです。
slicereplace が「元の文字列を変えない」のも、この性質によるものです。


文字列と数値の違い・変換でハマりやすいポイント

「数字っぽい文字列」と「本当の Number」

次の 2 つは、見た目は似ていますが型が違います。

let a = 10;    // number
let b = "10";  // string
JavaScript

typeof で確認してみます。

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 で部分文字列、includesindexOf で検索、replace で置き換えなどが基本。

大文字小文字の変換(toUpperCase / toLowerCase)、前後の空白除去(trim)は、入力処理でとてもよく使う。

String 自体は変更不可(イミュータブル)なので、操作すると「新しい文字列」が返ってくるだけで、元の文字列は変わらない。

ここが重要です。
String は「ユーザーと会話するための型」です。
入力も表示も、エラーメッセージも、画面に出るものはほとんど String。
“どうつくって、どう切り出して、どうチェックするか” を少しずつ手で書いて慣れていくと、JavaScript の楽しさが一気に広がります。

もしよければ、次のようなミニ練習をしてみてください。

名前(name)と年齢(age)を変数に入れて、
テンプレートリテラルで

私の名前は〇〇で、年齢は〇〇歳です。

という文章を 1 つの文字列として作り、console.log で出してみる。

それをやってみるだけで、
String の宣言・結合・埋め込みの一連の流れが、自分の手の感覚として掴めてくるはずです。

タイトルとURLをコピーしました