📘

【初心者向け】JavaScriptのsplitメソッドを解説する

2023/06/11に公開

はじめに

split()メソッドについてまとめます!

メソッドは特に「百聞は一見に如かず」なので、
早速使い方を見ていきましょう!

splitメソッド

句読点(、)で区切って分割する

const jpGreeting = "おはよう、こんにちは、こんばんは";
// 「、(句読点)」で区切って分割する
const words = jaGreeting.split("、");
  
console.log(words);
// ["おはよう", "こんにちは", "こんばんは"];

というように配列で返ってきます。

これはsplitの()の中に"、"(句読点)を指定していて、
句読点を削除してそれ以外の要素を
配列にしてくれるメソッドですね。

半角スペースで区切って分割する(非推奨)

以下の方法は非推奨ですが、
一応違いのために記述してみます。

const jpName = "tanaka taro";
// 「 (半角スペース)」で区切って分割する
const words = jaNames.split(" ");
  
console.log(words);
// ["tanaka", "taro"]

というように配列で返ってきます。

これはsplitの()の中に" "(半角スペース)を指定していて、
半角スペースを削除してそれ以外の要素を
配列にしてくれます。

ただ上記のように半角スペースを
直接指定するのは推奨されていないようです。

半角スペースで区切って分割する(推奨!)

では、どうやって記述すればいいのかというと、
正規表現」というものを使用します。

const jpName = "tanaka taro";
// 「 (半角スペース)」で区切って分割する
const words = jaNames.split(/\s/);
  
console.log(words);
// ["tanaka", "taro"]

このように独特な表現を使って半角スペースを表現するようです。

正規表現については以下で解説されています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_expressions

半角スペースとカンマで区切って分割する

const string = 'tanaka,suzuki おはよう こんにちは";
const words = string.split(/,|\s/);

console.log(words);
// [ 'tanaka', 'suzuki', 'おはよう', 'こんにちは' ]

第二引数で個数制限をする

また、splitの第二引数に数字を設定すると、
このようになります。

const jpGreeting = "おはよう、こんにちは、こんばんは";
// 「、(句読点)」で区切って分割する
const words = jaGreeting.split("、",2);
  
console.log(words);
// ["おはよう", "こんにちは"];

となっています。
第二引数に2を設定したのですが、これは、
配列の要素を2つまで格納する、ということです。

なので、3つ目の要素である "こんばんは" は今回は
格納されなかったというわけですね。

今回は以上です!

参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split

Discussion