変数で文字列を扱う方法

変数へ文字列を代入する方法

変数は、以下のようにダブルクォーテーション(")で囲って文字列を代入できます。

var x = "今日は";
let x = "今日は";
const x = "今日は";

ダブルクォーテーションの代りに、シングルクォーテーション(')も使えます。

文字列の結合

文字列は、以下のように結合できます。

const x = "今日は";
const y = "晴れです";
const z = x + y;

上記で、zは「今日は晴れです」になります。

特殊文字とエスケープシーケンス

文字列にダブルクォーテーションを使いたくて、以下のように記述してもエラーになります。

const x = "私は"こんばんは"と言いました。";

最初と最後のダブルクォーテーションで囲まれた範囲を代入して欲しいのですが、こんばんはを囲むダブルクォーテーションで切られてしまうためです。

このような特殊文字を扱うためには、エスケープシーケンスを使います。エスケープシーケンスは、バックスラッシュ(\)と文字列で表されます。日本語環境では、バックスラッシュの代りに円記号(\)でもエスケープシーケンスになります。

以下は、エスケープシーケンスを使って表示できる特殊文字の例です。

最初の例を、エスケープシーケンスを使って記述してみます。

const x = "私は\"こんばんは\"と言いました。";

これで、xにダブルクォーテーション含めた文字列が代入できます。

なお、ダブルクォーテーションの代りに、シングルクォーテーションを使って以下のように記述することも可能です。

const x = '私は"こんばんは"と言いました。';

これだと、エスケープシーケンスは不要です。

逆に、シングルクォーテーションを使いたい場合は、ダブルクォーテーションで代入する文字列全体を囲みます。

改行

先の表で、改行のエスケープシーケンスは\nと説明しました。

しかし、以下の例では改行されずに表示されます。

<h1 id="test">天気予報</h1>

<script>
const x = document.querySelector("#test");
let y = "<span>今日は晴れです。\n明日は雨です。</span>";
x.insertAdjacentHTML("afterend", y);
</script>

これは、HTMLでは改行コードによって改行されないためです。上記スクリプトは、IDがtestの要素(上の例ではh1要素)の下にspan要素を追加して、変数yの文字列を表示します。

改行するためには、br要素を使います。

<h1 id="test">天気予報</h1>

<script>
const x = document.querySelector("#test");
let y = "<span>今日は晴れです。<br>明日は雨です。</span>";
x.insertAdjacentHTML("afterend", y);
</script>

これで、改行して表示されます。また、p要素などを使って、段落を分けることでも改行されます。

なお、\nはファイルに保存したりする時に、改行コードとして保存されます。また、span要素ではなく記述どおりに表示するpre要素で使うと改行されます。