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

JavaScriptで値を文字列に変換する5つの方法を徹底解説

JavaScriptで値を文字列（string型）に変換する方法は、主に5つあります。それぞれ動作の仕組みや挙動が異なるため、用途に応じて使い分けることが大切です。

  • 空文字列との連結

  • テンプレート文字列

  • JSON.stringify()

  • toString()メソッド

  • String()関数

各変換方法のポイント

1. 空文字列との連結

値に対して空文字列 '' を加算すると、JavaScriptの暗黙的な型変換によって文字列になります。手軽な一方で、意図しない演算結果につながる可能性もあるため注意が必要です。

2. テンプレート文字列

バッククォート `${value}` を使う方法です。可読性が高く、複数の値を組み合わせた文字列を作成する際に特に便利です。

3. JSON.stringify()

オブジェクトや配列をJSON形式の文字列に変換したい場合に最適です。ただし、undefined や関数など、JSONとして表現できない値は変換されない点に留意してください。

4. toString()メソッド

数値やオブジェクトが持つメソッドを直接呼び出す方法です。基数を指定して数値を2進数・16進数などの文字列に変換できるのも特徴ですが、null や undefined に対して呼び出すとエラーになるため注意しましょう。

5. String()関数

グローバル関数 String() を使う方法です。null や undefined もエラーにならず安全に文字列へ変換できるため、最も汎用性の高い方法といえます。

サンプルコード

次の例では、上記すべての方法を使って値「123」を文字列に変換し、変換後の値と typeof による型を表示しています。

<html>
<body>
<script>
    const value = 123;
    document.write((value + '') + " " + typeof (value + ''));
    document.write("</br>");
    document.write((`${value}`) + " " + typeof (`${value}`));
    document.write("</br>");
    document.write((JSON.stringify(value)) + " " + typeof (JSON.stringify(value)));
    document.write("</br>");
    document.write((value.toString()) + " " + typeof (value.toString()));
    document.write("</br>");
    document.write((String(value)) + " " + typeof (String(value)));
</script>
</body>
</html>

実行結果

いずれの方法でも、値は文字列「123」に変換され、型は string となっています。

123 string
123 string
123 string
123 string
123 string

まとめ

単純な変換であれば空文字列との連結やテンプレート文字列が便利ですが、null や undefined が含まれる可能性がある場合は String() 関数を使うのが安全です。また、オブジェクトをJSON形式で扱いたい場面では JSON.stringify() が適しています。目的に応じて適切な方法を選択しましょう。

  1. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum

  2. JavaScriptで整数を2進数に変換する方法

    JavaScriptで整数を2進数に変換する基本の考え方JavaScriptで整数を2進数に変換するには、対象の整数を2で割り、その都度発生する余りを順番に記録していく方法が使われます。余りは必ず0か1になるため、計算が終わった後にこれらを逆順に並べると、元の整数の2進数表現が完成します。なお、実際の開発では toString(2) メソッドを使えば1行で変換できますが、ここでは変換の仕組み（アルゴリズム）を理解できるよう、剰余演算を用いた実装例を紹介します。サンプルコードfunction convertDecimalToBinary(value) {  var binar