JavaScriptの文字列とは？基本と使い方を解説
JavaScriptにおける「文字列（String）」は、テキストデータを扱うための基本的なデータ型です。Web制作では、ユーザーの入力や画面表示、データのやり取りなど、あらゆる場面で使用されます。
本記事では、文字列の基本から実践的な使い方までを体系的に解説します。
Contents
JavaScriptの文字列とは
JavaScriptの文字列とは、文字の並びを表すデータです。名前や文章、URLなどを扱う際に使用されます。
// 文字列の例
const name = "田中";
const message = 'こんにちは';文字列は「ダブルクォーテーション（”）」「シングルクォーテーション（’）」で囲んで表現します。
文字列の書き方
クォーテーションの種類
JavaScriptでは、以下の3種類で文字列を表現できます。
const str1 = "ダブルクォーテーション";
const str2 = 'シングルクォーテーション';
const str3 = `バッククォート`;基本的にはどれを使っても問題ありませんが、用途によって使い分けることが重要です。
テンプレートリテラル（バッククォート）
バッククォート（`）を使うと、変数の埋め込みや複数行の文字列が簡単に書けます。
const name = "佐藤";
const message = `こんにちは、${name}さん`;
console.log(message);
// こんにちは、佐藤さん文字列の連結
文字列同士は「+」で連結できます。
const firstName = "山田";
const lastName = "太郎";
const fullName = firstName + lastName;
console.log(fullName);
// 山田太郎テンプレートリテラルを使うと、より可読性が高くなります。
const fullName = `${firstName}${lastName}`;文字列の長さを取得する
文字列の長さは「length」で取得できます。
const text = "JavaScript";
console.log(text.length);
// 10文字列の基本操作
文字の取得
文字列の特定の位置の文字は、インデックスで取得できます。
const text = "JavaScript";
console.log(text[0]); // J
console.log(text[4]); // S部分文字列の取得（slice）
const text = "JavaScript";
const result = text.slice(0, 4);
console.log(result);
// Java※sliceの詳しい使い方は「JavaScriptのslice()の使い方解説」を参照
文字列の検索（includes）
const text = "JavaScript";
console.log(text.includes("Script"));
// true文字列の置換（replace）
const text = "Hello World";
const result = text.replace("World", "JavaScript");
console.log(result);
// Hello JavaScript大文字・小文字の変換
const text = "javascript";
console.log(text.toUpperCase()); // JAVASCRIPT
console.log(text.toLowerCase()); // javascriptエスケープシーケンス
文字列の中で特殊な文字を使う場合は「エスケープシーケンス」を使います。
const text = "彼は\"こんにちは\"と言った";
console.log(text);
// 彼は"こんにちは"と言ったよく使うエスケープ：
\"→ ダブルクォーテーション\'→ シングルクォーテーション\n→ 改行
文字列と数値の違い
JavaScriptでは、文字列と数値は明確に区別されます。
const num1 = "10";
const num2 = 10;
console.log(num1 + num2);
// "1010"数値として扱いたい場合は、変換が必要です。
const result = Number("10") + 10;
console.log(result);
// 20※データ型については「JavaScriptのデータ型とは？基本から解説」を参照
文字列を扱う際の注意点
型の違いによるバグ
文字列と数値が混在すると、意図しない結果になることがあります。
console.log("5" + 1); // "51"
console.log("5" - 1); // 4不変性（イミュータブル）
文字列は変更できない（イミュータブル）データです。
let text = "Hello";
text[0] = "h";
console.log(text);
// Hello（変わらない）変更する場合は、新しい文字列を作成します。
let text = "Hello";
text = "h" + text.slice(1);
console.log(text);
// hello実務でよく使うパターン
ユーザー入力の整形
const input = " JavaScript ";
const result = input.trim();
console.log(result);
// "JavaScript"URLやパスの生成
const baseUrl = "https://example.com";
const path = "/users";
const url = `${baseUrl}${path}`;
console.log(url);
// https://example.com/usersまとめ
JavaScriptの文字列は、以下のポイントを押さえることが重要です。
- クォーテーションやテンプレートリテラルで表現する
- 「+」やテンプレートリテラルで連結できる
- lengthやsliceなどのメソッドで操作する
- 数値との違いに注意する
- 不変性（変更不可）であることを理解する
文字列はWeb制作において最も頻繁に扱うデータのひとつです。基本を確実に押さえることで、バグの少ないコードを書くことができます。