JavaScriptの学習を始めたばかりの初心者の方の場合、
思った通りに文字列がつなげられない…
と悩んだこともあるのではないでしょうか。
そこで今回はJavaScriptで文字列を連結させる方法について、
文字を結合させる方法
文字列に変数を入れたい
改行して文字列を連結させたい
をご紹介します。
JavaScriptで文字列を連結させる方法がわからない方は、ぜひ参考にしてみてくださいね。
文字を結合させる方法
文字列+文字列
文字列と文字列を結合させる場合は「+演算子」を使います。
|
1 |
文字列1 + 文字列2 |
実際に文字を連結する例文がこちらです。
|
1 2 3 |
let sample; sample = "今日も" + "がんばるぞ！"; console.log(sample); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
今日もがんばるぞ！
文字列+数値
では今度は文字列に数値を結合させるとどうなるでしょうか。
|
1 2 3 |
let sample; sample = "100" + 1; //「100」は文字列だが、「1」は数値。 console.log(sample); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
1001
「101」とはなりませんでした。
+演算子の左側が文字列の場合、右側の数値は文字列として扱われてしまうからです。
数値+文字列
では今度は逆に、数値+演算子の左に持ってきて文字列を結合させるとどうなるでしょうか。
|
1 2 3 |
let sample; sample = 1 + 2 + "円"; //「1」「2」は数値だが、「円」は文字列。 console.log(sample); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
3円
+演算子は左から順に実行されます。
最初の+演算子を見ると、「1+2」ですので、ここは文字結合ではなく単純に加算となり「3」となります。
そこに、文字列の「円」を結合するという処理がされています。
文字列に変数を入れたい
では、今度は文字列に変数の中身を入れて出力したい場合ですが、これも+演算子で結合します。
|
1 2 3 4 |
let sample; let age = "30" sample = "私の年齢は" + age + "歳です。"; console.log(sample); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
私の年齢は30歳です。
もう１つ別の方法をご紹介します。
文字列をバッククオート「`」で囲むテンプレート構文を使います。
先ほどの例文をテンプレート構文で書き直してみます。
|
1 2 3 4 |
let sample; let age = "30" sample = `私の年齢は${age}歳です。`; console.log(sample); |
上記のコードを実行しても、コンソールには同じ内容が出力されますね。
私の年齢は30歳です。
改行して文字列を連結させたい
文字列を結合するときに、改行して出力させたい場合の方法についてです。
例えば、最初の文字列結合で、結合時にコード内で改行しても出力内容は変わりません。
|
1 2 3 4 |
let sample; sample = "今日も" + "がんばるぞ！"; console.log(sample); |
コンソールには下記の内容が出力されます。改行はされていませんね。
今日もがんばるぞ！
改行をする場合は改行させたい部分に「\n」の記号を入れる必要があります。
※「\」は「バックスラッシュ」と呼ばれる記号です。
|
1 2 3 |
let sample; sample = "今日も\n" + "がんばるぞ！"; console.log(sample); |
コンソールには下記の内容が出力されます。改行はされていませんね。
今日も
がんばるぞ！
もしくはテンプレート構文であれば、改行はそのままで出力されます。
|
1 2 3 4 |
let sample; sample = `今日も がんばるぞ！`; console.log(sample); |
コンソールには下記の内容が出力されます。改行はされていませんね。
今日も
がんばるぞ！
まとめ
以上、JavaScriptでで文字列を連結させる方法について、
文字を結合させる方法
文字列に変数を入れたい
改行して文字列を連結させたい
についてご紹介しました。
思い通りに出力させるためには必要な内容ですので覚えて是非使ってみてください。
