文字列を扱おう

データ型とは

プログラムでは、さまざまな種類のデータを扱います。例えば、数値や文字などです。これらのデータの種類のことをデータ型（data type）と呼びます。

JavaScript には、例えば以下のような基本的なデータ型があります。

• 文字列（string）: 文字の並び。例："こんにちは"、"JavaScript"
• 数値（number）: 整数や小数。例：42、3.14
• 真偽値（boolean）: true（真）または false（偽）

console.log("Hello"); // => Hello（文字列）
console.log(42);      // => 42（数値）
console.log(3.14);    // => 3.14（数値）

データ型によって、そのデータに対してできる操作が変わります。例えば、数値同士は計算ができますし、文字列同士は連結（つなげること）ができます。

このレッスンでは、文字列について詳しく学びます。

文字列とは

文字列とは、文字の並びのことです。最初のレッスンで学んだように、JavaScript では文字列をクォーテーション（引用符）で囲んで作ります。

console.log("こんにちは"); // => こんにちは
console.log('JavaScript'); // => JavaScript

ダブルクォーテーション（"）でもシングルクォーテーション（'）でも、同じ文字列を作ることができます。

文字列は変数や定数に代入して使うこともできます。

const greeting = "おはようございます";
console.log(greeting); // => おはようございます

文字列の連結

+ を使うと、複数の文字列をつなげることができます。

const first = "Hello";
const second = "World";

console.log(first + second); // => HelloWorld

3つ以上の文字列をつなげることもできます。

const greeting = "こんにちは";
const name = "太郎";

console.log(greeting + "、" + name + "さん"); // => こんにちは、太郎さん

文字列の長さを調べる

.length を使うと、文字列の長さ（文字数）を調べることができます。

const message = "Hello";
console.log(message.length); // => 5

日本語の文字も1文字としてカウントされます。

const japanese = "こんにちは";
console.log(japanese.length); // => 5

空の文字列（""）の長さは 0 です。

const empty = "";
console.log(empty.length); // => 0

const emoji = "😄";
console.log(emoji.length); // => 2

改行文字とエスケープシーケンス

文字列の中で改行を表現したいとき、改行文字 \n を使います。

console.log("こんにちは\nさようなら");
// => こんにちは
//    さようなら

このように、文字列の中で \n を使うと、その位置で改行されて出力されます。

\n のように、バックスラッシュ（\）で始まる特殊な文字の組み合わせをエスケープシーケンスと呼びます。エスケープシーケンスを使うと、通常の文字では表現できない特殊な文字を文字列に含めることができます。

よく使われるエスケープシーケンスには以下のようなものがあります。

• \n : 改行
• \t : タブ
• \\ : バックスラッシュそのもの

console.log("これはタブ→\t←です");
// => これはタブ→	←です

バックスラッシュそのものを出力したい場合は、\\ と書きます。

console.log("フォルダ名: C:\\Users\\Documents");
// => フォルダ名: C:\Users\Documents

テンプレートリテラル

変数の値を文字列の中に埋め込みたいとき、テンプレートリテラルを使うと便利です。

テンプレートリテラルでは、ダブルクォーテーションやシングルクォーテーションの代わりに、バッククォート（`）で文字列を囲みます。そして、埋め込みたい変数を ${} で囲みます。

const name = "太郎";
console.log(`こんにちは、${name}さん`); // => こんにちは、太郎さん

+ を使った連結と比べてみましょう。

const name = "太郎";

// + で連結する場合
console.log("こんにちは、" + name + "さん"); // => こんにちは、太郎さん

// テンプレートリテラルを使う場合
console.log(`こんにちは、${name}さん`); // => こんにちは、太郎さん

テンプレートリテラルを使うと、文字列全体の形がわかりやすくなります。

複数の変数を埋め込むこともできます。

const name = "太郎";
const food = "りんご";

console.log(`${name}さんは${food}が好きです`); // => 太郎さんはりんごが好きです

まとめ

• 文字列はクォーテーション（" または '）で囲んで作成する
• + で文字列を連結できる
• .length で文字列の長さを調べられる
• \n で改行、\t でタブなど、エスケープシーケンスで特殊な文字を表現できる
• テンプレートリテラル（`）と ${} を使うと、変数を文字列に埋め込める