string型 (文字列型)

文字列リテラル

Javaなどの言語では、ダブルクォートで文字列リテラル(String型)を表現し、シングルクォートで文字リテラル(char型)を表現するといったように、使うクォートで型が変わります。

一方JavaScriptでは、ダブルクォートでもシングルクォートでもまったく同じstring型になります。この点はPHPと同様です。またバッククォート(`)を使ってもstring型になります。

ts
"Hello"; 
'Hello'; 
`Hello`;

ts
"Hello"; 
'Hello'; 
`Hello`;

文字列中に同じ引用符が含まれている場合は、バックスラッシュ\でエスケープしなければなりません。

ts
'He said "madam, I\'m Adam."'
"He said \"madam, I'm Adam.\""

ts
'He said "madam, I\'m Adam."'
"He said \"madam, I'm Adam.\""

ダブルクォートとシングルクォートを使った文字列リテラルは、文字列の途中で改行できません。改行を入れたい場合は、\nなどの改行シーケンスを入れる必要があります。

テンプレートリテラル

JavaScriptで、バッククォート`で囲んだ文字列はテンプレートリテラル（template literal）と言います。テンプレートリテラルは、改行と式の挿入(expression interpolation)ができます。

改行の挿入はテンプレートリテラルの中で実際に改行をすれば、そのとおりに反映されます。

ts
console.log(`実際に改行を
してみる`);
実際に改行を
してみる

ts
console.log(`実際に改行を
してみる`);
実際に改行を
してみる

式の挿入は${式}のように書きます。

ts
const count = 10;
console.log(`現在、${count}名が見ています。`);
現在、10名が見ています。

ts
const count = 10;
console.log(`現在、${count}名が見ています。`);
現在、10名が見ています。

式の部分は変数だけでなく、計算式や関数を使った式も書けます。

ts
`税込み${Math.floor(100 * 1.1)}円`

ts
`税込み${Math.floor(100 * 1.1)}円`

文字列リテラルは'、"、`のどれを使うべきか？

前述のとおりJavaScriptでは文字列を表すときに3種類のクォートがありますが、どれを使えばいいのでしょうか。ここではJavaScriptのコードフォーマッターであるPrettierに倣い使い分けを紹介します。
なおこれは正解でもなければデファクトスタンダードというわけでもないので開発チームの基準があるならばそちらに従うことが望ましいです。

1. 基本的に"を使用する
2. 文字列の中に"が含まれる場合は'を使用する
3. 文字列展開する必要があるときは`を使用する

基本的に"を使用する

ただの文字列で内部で変数展開をしていないのであれば"を使用します。

文字列の中に"が含まれる場合は'を使用する

文字列の中に"が含まれる場合はエスケープするのではなく'を使用します。

文字列展開する必要があるときは`を使用する

式を計算する必要があるときはテンプレートリテラル`を使用します。

文字列の型注釈

TypeScriptのstring型の型注釈はstringを用います。

ts
const message: string = "Hello";

ts
const message: string = "Hello";

名前がよく似た型にString型がありますが、stringとは異なるので注意してください。

文字列結合

JavaScriptの文字列結合は文字列結合演算子(+)を用います。number型の加算でも同じ演算子が使われます。

ts
"hello" + "world"

ts
"hello" + "world"

PHPでは文字列結合演算子(.)と、数値の加算演算子(+)の2つに分かれていますが、JavaScriptでは文字列結合と加算は同じプラス記号で表現するので、PHPからJavaScriptに来た人は注意してください。