文字列を扱う時はどの言語でもクォーテーションを用いますよね。
そのクォーテーションの違いや文字列の連結などについてまとめました。
今回は主にJavaScriptに基づき解説します。PHPなどでも似たように使うようですが、他言語では少し挙動が変わると思うのでご容赦ください。
ちなみに「コーテーション」ともたまに言われます。
もくじ
3つのクォーテーション
クォーテーションには以下の3つがあります。
' (シングルクォーテーション、一重引用符)
" (ダブルクォーテーション、二重引用符)
` (バッククォーテーション、バックティック)
主に文字列を扱う時に使いますが、` (バッククォーテーション)だけ少し使い方が異なります。
バッククォーテーションは最後に説明します。まずは基本的な文字列の扱いを説明します。
シングルクォーテーションとダブルクォーテーション
文字列を囲む引用符として使用することができます。JavaScriptではどちらを使ってもほとんど違いはありません。PHPでは少し使い道に違いがあったような記憶があります。
let sgl = 'シングルクォーテーション'; let dbl = "ダブルクォーテーション"; let sgl_en = 'single'; let dbl_en = "double";
日本語も、もちろん英語も文字列にできます。
同じクォーテーションで閉じる
始まりと終わりのクォーテーションはシングルかダブルか必ずそろえましょう。
let ng = 'だめな例";
始まりがシングルクォーテーションで終わりがダブルクォーテーションなので問題ありありな書き方です。これだけはしないようにしましょう。
エスケープ
エスケープとは、引用符自体を文字列として用いたい時に文字列として認識させる書法です。
let sample = 'I'm happy.';
上記の場合I'm部分のシングルクォーテーションが引用符として認識され、どのシングルクォーテーションで始まって終わるのかブラウザが困ってしまいます。
それを回避するためにエスケープします。
JavaScript では\（バックスラッシュ）を文字の前におくことでエスケープすることができます。環境によっては¥（円マーク）を用います。
let sample = 'I\'m happy.';
文字列の連結
JavaScript で文字列を結合するには+（プラス演算子）を使用します。
let lastname = 'たなか'; let firstname = 'はなこ'; let fullname = lastname + firstname; console.log(fullname); // 結果：たなかはなこ
+（プラス演算子）を用いればいくつでも結合することができ、数字も連結できます。
let lastname = 'たなか'; let firstname = 'はなこ'; let age = '10'; console.log( lastname + firstname + 'は' + age + '歳です。'); // 結果：たなかはなこは10歳です。
連結する時に文字列を指定することもできますし、数字を文字列とすれば演算されずに連結できます。
let date = '19' + '67'; // 結果：1967 let date = 19 + 67; // 結果：86
こちらもあわせてご確認ください。
バッククォーテーション
テンプレートリテラル
今回、これを調べたくて文字列の扱いをまとめました。
テンプレートリテラルは、組み込み式を扱うことができる文字列リテラルです。複数行の文字列や文字列挿入機能を使用することができます。
テンプレートリテラルにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧 (${expression}) で示されます。プレースホルダー内の式とバックティック文字 (
) の間にあるテキストが関数に渡されます。
参考；テンプレートリテラル (テンプレート文字列) - JavaScript | MDN
これを用いると、文字列の連結を使わずスマートに変数を潜り込ませたりすることができます。
let old = 10; let young = 6; console.log(`兄弟の年齢はあわせて${old + young}歳です。`); // 結果：兄弟の年齢はあわせて16歳です。
HTMLタグを代入する際も、文字列の連結を使用せずに変数でData-id属性をもたせたりすることも可能です。
let link = `<a data-id="${data}">link</a>`);
また、変数を使ったID名、クラス名などにも応用が利きます。
$(`#${data}Modal`).modal();
スマートにかけるのでいいですね！
しかし、バッククォーテーションを使ったテンプレートリテラルはIEではもしかしたらうまく表示されないかもしれません。少し新しめの仕様なのかもしれません。頭の片隅においておきましょう。
