home
twitter
ページトップへ
目次
  • そもそも文字列の連結とは?
  • JavaScriptで「文字列の連結」をする方法
  • string型 + string型
  • string型 + number型
  • number型 + string型
  • number型 + number型 + string型
  • symbol型を除く他の全ての型のデータは文字列に変換される。
  • まとめ
about
categories
page
archive
皇帝ペンギンブログ

2022/08/11 (更新日:2024/07/11)

【JavaScript】文字列の連結とは?方法を丁寧に解説。

Categories > JavaScriptの基本編
JavaScriptにおける文字列の連結って何?

JavaScriptで、+ (加算演算子)を文字列などに使うと、それらを連結させることが可能です。

この記事では、JavaScriptにおける「文字列の連結」に関する挙動に関して解説します。

この記事で得られる知識

  • JavaScriptの文字列の連結とは?
  • JavaScriptで「文字列の連結」の仕方

では、内容へ。

目次
非表示
  • そもそも文字列の連結とは?
  • JavaScriptで「文字列の連結」をする方法
  • string型 + string型
  • string型 + number型
  • number型 + string型
  • number型 + number型 + string型
  • symbol型を除く他の全ての型のデータは文字列に変換される。
  • まとめ

そもそも文字列の連結とは?

文字列の連結とは、その名前の通り、2つのstring型のデータを、一つのstring型のデータにすることを指します。

実は、両方がstring型である必要はないので、それについての挙動も順を追って解説しますね。

JavaScriptで「文字列の連結」をする方法

let result = "ラーメン" + "が好きです。";

console.log( result ); // "ラーメンが好きです。"

JavaScriptの「文字列の連結」は簡単で、上のように、+ (加算演算子) を使うことで実現できます。

string型 + string型

let result = "北海" + "道";

console.log( result ); // "北海道"

string型 + string型の時は、この様に普通に上手くいきます。

string型 + number型

let result = "12" + 6;

console.log( result ); // "126"

string型 + number型 に対して+ 演算子を使うと、JavaScriptでは、暗黙的に「型変換」が行われます。

string型 + number型

↓

string型 + string型

となります。

なので結果は”126″となるのですね。

number型 + string型

number型 + string型 の時も同じです。

number型 + number型 + string型

let result = 1 + 3 + "10";

console.log( result ); // "410"

この様な場合は、同じ優先度の場合は、通常式は左から評価されるので、まず「1+3」が計算された後に「文字列の連結」が行われます。

symbol型を除く他の全ての型のデータは文字列に変換される。

+ が二項演算子として機能するとき、片方が文字列であれば、もう片方のオペランドは文字列型に暗黙的に型変換が行われます。

※但し、symbol型のデータは、自動的に文字列には変換されませんので、symbol型以外、ですね。

オペランドとは?

オペランドとは、演算子が適用されるもの、のことです。

2つのオペランドに適用される演算子は「二項演算子」と呼ばれます。

文字列の連結で使われる+ は二項演算子です。

それに対して、

let count = "23";

typeof +count; // "number"

この様な型変換で使われるような+ はオペランドが1つなので「単項演算子」です。

まとめ

JavaScriptでは、+ を使うと「文字列の連結」ができる。

+ が二項演算子として機能し、片方のオペランドがstring型であるとき、片方が文字列型に型変換されて、「文字列の連結」が行われる。(symbol型を除く)

式は左から評価される。

この記事の内容は以上となります。

最後まで読んでくれてありがとうございました!

自分のロゴ!

皇帝ペンギン

全力で、書きます。
少しでもお役に立てたら幸いです。
楽しんで読んで下さい 。-_- 。
よろしくお願いします!

x(旧twitter) youtube
Categories
  • トップへ
  • ITパスポート (1)
  • programming (168)
    • CSSのアニメーション編 (26)
    • CSSのグリッドレイアウト編 (1)
    • CSSのセレクター編 (58)
    • CSSのフレックスボックス編 (1)
    • CSSのメディアクエリー編 (7)
    • CSSの基本編 (34)
    • HTMLのformタグ編 (1)
    • HTMLの基本編 (3)
    • JavaScriptの入門編 (30)
    • JavaScriptの基本編 (5)
    • Web制作をする環境を整えよう! (1)
  • Uncategorized (23)
  • VScode (1)
  • おすすめ商品! (1)
  • クラロワ (2)
  • マーケティング (17)
  • 大学生活 (7)
  • 心理学 (9)
  • 映画 (1)
  • 法学 (4)
  • 経済学 (4)
  • 読書 (7)
Pages
  • プライバシーポリシー
  • 免責事項
  • プロフィール
Archive
  • 2025年3月 (1)
  • 2025年1月 (9)
  • 2024年12月 (13)
  • 2024年11月 (5)
  • 2024年10月 (10)
  • 2024年9月 (15)
  • 2024年8月 (5)
  • 2024年7月 (6)
  • 2024年6月 (5)
  • 2024年5月 (10)
  • 2024年4月 (24)
  • 2024年3月 (11)
  • 2024年2月 (6)
  • 2024年1月 (10)
  • 2023年12月 (4)
  • 2023年11月 (3)
  • 2023年10月 (2)
  • 2023年9月 (3)
  • 2023年8月 (6)
  • 2023年7月 (3)
  • 2023年6月 (8)
  • 2023年5月 (2)
  • 2023年3月 (1)
  • 2023年2月 (1)
  • 2022年10月 (2)
  • 2022年9月 (2)
  • 2022年8月 (8)
  • 2022年7月 (2)
  • 2022年6月 (6)
  • 2022年5月 (9)
  • 2022年4月 (2)
  • 2022年2月 (4)
  • 2021年12月 (1)
  • 2021年11月 (4)
  • 2021年10月 (8)
  • 2021年9月 (14)
  • 2021年8月 (6)
  • 2021年6月 (1)
  • 2021年5月 (2)
  • 2021年4月 (1)
  • 2021年3月 (1)
  • 2021年2月 (2)
  • 2020年10月 (1)
  • 2020年7月 (1)
  • 2020年4月 (1)
  • 2020年1月 (1)
  • 2019年12月 (2)
© Copyright Syuta Chiba, 2019 All Rights Reserved.