JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】
JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。
以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。
サンプルコード
<!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 {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript配列から文字列への変換</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、配列arrが文字列に変換されます</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let arr = ["Cow", "Lion", "Tiger", "Dog", "Cat"];
BtnEle.addEventListener("click", () => {
resEle.innerHTML = arr.toString();
});
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のように表示されます。
「ここをクリック」ボタンを押すと、配列の各要素がカンマ区切りの文字列として出力されます。
ポイント解説
- toString()は引数を受け取らず、配列の全要素を「要素1,要素2,要素3…」という形式の文字列に連結して返します。
- ネストされた（入れ子の）配列の場合も、内部の配列が自動的に展開されてフラットな文字列になります。
join()メソッドとの違い
似た用途で使われるjoin()メソッドは、区切り文字を自由に指定できる点が特徴です。例えば arr.join(" - ") とすれば「Cow - Lion - Tiger…」のような形式で出力できます。単純にカンマ区切りでよい場合はtoString()、独自の区切り文字を使いたい場合はjoin()を選ぶとよいでしょう。
-
【初心者向け】JavaScriptのArray.from()メソッドの使い方を実例で解説
JavaScript の Array.from() メソッドは、length プロパティを持つオブジェクト（配列風オブジェクト）や、文字列・Map・Set などの反復可能（イテラブル）なオブジェクトから、新しい Array オブジェクトを生成して返すためのメソッドです。元のオブジェクトは変更されず、常に新しい配列インスタンスが返されます。 基本構文 Array.from(obj, mapFunction, val) パラメータの説明 obj：配列へ変換したい対象のオブジェクト。配列風オブジェクト（length プロパティを持つもの）や反復可能なオブジェクトを指定します。 mapFunctio
-
JavaScriptのArray.from()メソッドとは？使い方と実例をわかりやすく解説
Array.from()メソッドは、配列風オブジェクト（array-like）や反復可能オブジェクト（iterable）から、新しい配列オブジェクトを作成するための便利なメソッドです。文字列、Map、Set、NodeListなど、さまざまなデータを手軽に配列へ変換できます。 Array.from()の基本的な動作 例えば、文字列「HelloWorld」に対してArray.from()を使用すると、1文字ずつ分割された新しい配列が生成されます。以下に実際のコード例を示します。 サンプルコード <!DOCTYPE html> <html lang="ja"&g