文字列とテンプレートリテラル

"5" + 3 は 8 ではなく "53" になります。+ の片側が文字列だと、JavaScript は数を足すのではなく、文字をつなげます。

プログラムの中の文字

名前、メッセージ、住所、パスワード、そして Web ページ全体も、すべて文字です。JavaScript は文字を文字列として保存します。文字列は、引用符ではさんだ文字の並びです。JavaScript では三種類の引用符が使えます。二重引用符 "like this"、一重引用符 'like this'、バッククォート `like this` です。はじめの二つは同じように働きます。バッククォートはテンプレートリテラルを作ります。テンプレートリテラルには、あとで説明する特別な力があります。

文字の中にどちらかの引用符がふくまれるときは、もう一方の引用符で囲みます。"It's late" が使えるのは、アポストロフィが二重引用符ではないからです。引用符の前にバックスラッシュを置いて、「これは文字の一部です」と示すこともできます。'It\'s late' です。バックスラッシュのあとに n を続けた は、文字列の中の改行を意味します。

長さと位置

どの文字列も、自分が何文字あるかを知っています。"JavaScript".length は 10 です。それぞれの文字にはインデックスと呼ばれる位置もあり、数えはじめは 1 ではなく 0 です。ですから "JavaScript" では、インデックス 0 が J、インデックス 4 が S で、最後のインデックスは長さより一つ少ない 9 です。一文字だけを読むには角かっこを使います。word[0] です。0 から数えるのは最初は変に感じますが、ほとんどのプログラミング言語はこう数えます。配列でもまた出てきます。

const word = "JavaScript";
console.log(word.length);                // 10
console.log(word[0]);                    // J
console.log(word[word.length - 1]);      // t

便利な文字列のメソッド

文字列には、メソッドと呼ばれる組みこみの道具がついています。文字列のあとにドットを書いて呼び出します。toUpperCase() と toLowerCase() は、大文字または小文字にしたコピーを返します。includes("Script") は、その文字が中にあるかどうかで true か false を答えます。slice(0, 4) はインデックス 0 からインデックス 4 の手前までの文字を返します。"JavaScript" なら "Java" です。trim() は両端の空白を取りのぞくので、人が入力したものを整えるのに便利です。どれも元の文字列は変えません。JavaScript の文字列はその場で書きかえることができず、メソッドはいつも新しい文字列を返します。

+ で文字列をつなげる

+ 演算子は文字列を端と端でつなげます。これを連結と呼びます。"Hello, " + "Mina" は "Hello, Mina" になります。空白は自動では入らないので、自分で引用符の中に入れましょう。ここに、冒頭で見た落とし穴があります。+ のどちらか片側が文字列だと、JavaScript はもう一方も文字列に変えてからつなげます。"5" + 3 は "53" です。ほかの算術演算子は文字をつなげないので、"5" * 2 は "5" を数に変えて 10 を返します。数字が入った文字列を本当の数に変えるには、Number("5") を使います。

テンプレートリテラル

+ で文を組み立てると、すぐにごちゃごちゃになります。name + " is " + age + " years old." では、空白と引用符に気をつかいます。バッククォートで書くテンプレートリテラルなら、${ } で値を文字の中に直接入れられます。波かっこの中は式として評価され、その結果が文字列の中に置かれます。テンプレートリテラルは何行にもわたって書くこともできます。

const name = "Mina";
const age = 14;
console.log(`${name} is ${age} years old.`);   // Mina is 14 years old.
console.log(`Next year: ${age + 1}`);           // Next year: 15

例題。店の値札に "3 apples cost 4.5" と表示したいとします。const n = 3, price = 1.5; とすれば、テンプレート `${n} apples cost ${n * price}` で一行で書けます。かけ算は波かっこの中で行われます。