https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/how-to-use-split-method-to-split-a-string-with-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/how-to-use-split-method-to-split-a-string-with-javascript/

JavaScriptで文字列を分割するsplit()メソッドの使い方

JavaScriptで文字列を分割したい時にはsplit()メソッドが便利です。

split()メソッドを使うと、第一引数の文字、または正規表現で区切った配列を取得することができます。

実務環境では、URLのクエリ文字を分けて配列に格納したり、「,」で区切られた文字列を配列に格納する場面で使用されます。

構文

メソッド意味返り値
文字列.split([区切り文字](省略可), [許容する分割数])指定範囲内の文字列を取得する配列
split()メソッド

サンプルコード

サンプルとして、正規表現でURLのクエリを取得するサンプルコードを紹介します。

Output
split( /&|?/ )
split()
split( ” )
Pug
.container.my-5
	table.table
		tr
			th split( /&|?/ )
			td.result1
		tr
			th split()
			td.result2
		tr
			th split( '' )
			td.result3
JavaScript
const targetString = 'https://example.com/?id=1234567890&name=satou&gender=male';
//正規表現で切り抜き
document.querySelector('.result1').innerHTML = targetString.split( /&|?/ );
document.querySelector('.result2').innerHTML = targetString.split();
document.querySelector('.result3').innerHTML = targetString.split( '' );

もう少し実践的なコードも紹介します。

実作業では、パラメータと値を1組みの連想配列に分けることが多いため、その場合のサンプルコードも紹介します。

Output
hashes[‘id’]
hashes[‘name’]
hashes[‘gender’]
Pug
.container.my-5
	table.table
		tr
			th hashes['id']
			td.result4
		tr
			th hashes['name']
			td.result5
		tr
			th hashes['gender']
			td.result6
JavaScript
// クエリを格納するためのオブジェクト
const queries = {};

const targetString2 = 'https://example.com/?id=1234567890&name=satou&gender=male';
//targetStringをsplit()メソッドで分けて、別れたそれぞれの値に「=」が含まれている物を配列として返す。
const parameters = targetString2.split(/&|?/).filter((value) => {
  return value.includes('=');
});

// queries[key]=valueの形でオブジェクトに格納する
parameters.forEach((parameter) => {
  // hoge=fugaを['hoge', 'fuga']の配列にする
  const parameterList = parameter.split('=');
  const key = parameterList[0];
  // valueはデコードしておく
  const value = decodeURIComponent(parameterList[1]);

  queries[key] = value;
});

// 取得したパラメータを反映

// queriesにidが含まれていれば、それを反映
if (queries['id'] != null) {
  document.querySelector('.result4').innerHTML = queries['id'];
}

if (queries['name'] != null) {
  document.querySelector('.result5').innerHTML = queries['name'];
}

if (queries['gender'] != null) {
  document.querySelector('.result6').innerHTML = queries['gender'];
}

この様に、パタメータ名をkeyとする連想配列にする方法を知っておくと、データのやり取りをする際に非常に楽になりますので、覚えておくと良いです。(というか、これ知らなかったら多分何も作れません。)

インストラクター
コメント

コメントを残す