JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

型強制（Type Coercion）とは、あるデータ型が自動的・暗黙的に別のデータ型へと変換される仕組みのことです。JavaScriptは動的型付け言語であり、開発者が明示的に型を指定しなくても、状況に応じて値の型が自動的に変換されます。

特に注意が必要なのが「+」演算子です。片方が文字列の場合、数値は文字列に変換されて文字列の連結として処理されます。一方、「-」「*」「/」などの算術演算子では、文字列は数値へ変換されるため、挙動の違いを理解しておくことが重要です。

以下に、JavaScriptにおける型強制の動作を確認できるサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript type coercion</h1>
<div class="sample">22</div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、表示中の数値に5を加算します。</h3>
<script>
    let sampleEle = document.querySelector('.sample');
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = ' "22" + 5 = ' + sampleEle.innerHTML+5;
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

「CLICK HERE」ボタンをクリックすると、結果は以下のようになります。

JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

結果のポイント

この例では、HTML上のテキストとして取得した "22" は文字列です。「+」演算子を使うと、数値の5が文字列に暗黙的に変換され、"225" という文字列連結の結果になります。もし数値として加算したい場合は、Number() や parseInt() を使って明示的に型変換を行うか、+ の代わりに単項プラス演算子 +sampleEle.innerHTML のように記述します。


  1. JavaScriptの型変換に便利な「+」演算子の重要性とは？具体例付きで解説

    JavaScriptにおける「+」演算子は、数値の加算や文字列の連結など幅広い用途を持つ一方で、実は型変換においても非常に重要な役割を果たしています。普段は足し算の計算に使うことが多いですが、単項演算子（オペランドが一つだけの形）として使うことで、文字列を驚くほど簡単に数値へ変換できるのです。 文字列を数値へ変換する例 <html> <body> <script>     var num = 23;     int = +num;     

  2. JavaScript：%演算子が文字列に対して機能するのはなぜ？型強制の仕組みを徹底解説

    JavaScriptには、一見すると奇妙に見える動作がいくつか存在します。例えば、モジュロ演算子（%）が文字列に対しても正常に機能すること、また文字列連結の際に予想外の結果が生じることが挙げられます。本記事では、こうした現象がなぜ起こるのかを「型強制」という重要な概念を通じて分かりやすく解説します。 問題となるコード まず、実際のコードを見てみましょう。 const numStr = 127; const result = numStr % 5; const firstName = Armaan; const lastName = Malik; const fullName = firstN