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

JavaScriptで文字列を文字配列に変換する方法をわかりやすく解説

JavaScriptで文字列を文字配列として扱いたい場面は多くあります。本記事では、substring()メソッドを使って文字列を1文字ずつ取り出し、文字配列のように処理する基本的な方法を解説します。

substring()メソッドを使った変換方法

substring()は、文字列の中から指定した範囲の部分文字列を抽出できるJavaScriptの標準メソッドです。開始位置iから終了位置i + 1までを指定することで、文字列を先頭から順番に1文字ずつ取得できます。

サンプルコード

以下のコードを実行すると、文字列「Amit」が1文字ずつアラートで表示され、文字配列のように扱えていることが確認できます。

<html>
  <head>
    <title>JavaScript Arrays</title>
  </head>
  <body>
    <script>
      var str = "Amit";
      for (var i = 0, j = str.length; i < j; i++) {
        alert(str.substring(i, i + 1));
      }
    </script>
  </body>
</html>

このコードでは、str.lengthで文字列の長さを取得し、ループ内でsubstring(i, i + 1)を呼び出すことで、「A」「m」「i」「t」というように各文字を順番に取り出しています。

split()メソッドを使うよりシンプルな方法

実際の開発現場では、文字列を配列に変換する際にはsplit('')メソッドを使うのが最も一般的です。引数に空文字列を渡すだけで、1行で文字配列を作成できます。

var str = "Amit";
var charArray = str.split('');
console.log(charArray); // ["A", "m", "i", "t"]

ES6以降ならArray.from()も便利

モダンなJavaScript（ES6以降）では、Array.from()メソッドを使うことでも文字列を直接配列化できます。日本語などのマルチバイト文字にも対応しており、可読性も高いためおすすめです。

const str = "Amit";
const charArray = Array.from(str);
console.log(charArray); // ["A", "m", "i", "t"]

まとめ

  • substring()メソッド： ループ処理と組み合わせて1文字ずつ取り出す古典的な方法。
  • split('')メソッド： 最もシンプルで広く使われている変換方法。
  • Array.from()メソッド： ES6以降で使えるモダンな方法。マルチバイト文字にも強い。

用途に応じてこれらの方法を使い分けることで、文字列操作を効率的に行えます。まずは基本となるsubstring()の動作を理解し、その後split()やArray.from()への活用を検討するとよいでしょう。

  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. 文字列を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