26
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

.split()と.sliceでデータを欲しい状態に整える

この記事は、プログラミング歴3ヶ月の私が、初心者の目線で、これからプログラムを勉強し始める方対象の記事です。
もし間違い等がございましたら、ご指摘いただけると幸いです。

.split()でできること

.split()は入力されたデータに対して使用することのできるメソッドで、()内に含まれる文字列やデータで「分ける」ことができます。そして分けたものを、リストとして出力してくれるのが.splitメソッドの特徴です。

例えば、
"abcdabcdabcd"という文字列を "d"という文字列で区切ってみると

var str = "abcdabcdabcd";   //strはstringの略で文字列の変数を作るときによく使うようです。
var s_str = str.split("d"); //1行目で定義したstrに対して文字列dで分けたものをs_strとします
console.log(s_str);  //s_strを出力します。

という具合に使えます。
各行での処理結果は以下の通りです。
2行目と3行目の結果がリスト([]←コレ!)になっていることがポイントです。

var str = "abcdabcdabcd";   //abcdabcdabcd  
var s_str = str.split("d"); //  ["abc", "abc", "abc", ""]
console.log(s_str);  // ["abc", "abc", "abc", ""]

/\n/と/\s/でのsplit

/\n/の使い方

入力されるデータが

Qiitaって
便利
だよね

というように改行がつけられていたときに使えるのが、/\n/です。
実はこの場合の入力データはPC内では以下のように認識されています。

"Qiitaって\n便利\nだよね"

そのため、このデータを改行区切りするためには以下のような処理を行います。

var str = "Qiitaって\n便利\nだよね"
var s_str = str.split(/\n/);
console.log(s_str);  // ["Qiitaって", "便利", "だよね"]

/\s/の使い方

空白文字で区切るときに、/\s/を利用します。
入力されたデータが

I love JavaScript

だった場合、以下のような処理結果になります。

var str = "I love JavaScript";
var s_str = str.split(/\s/);
console.log(s_str); // ["I","Love", "JavaScript"]

※ /\n/や/\s/と表記しましたが、大事なのは/nと/sという部分です。ちなみに、これらのことを正規表現と呼ぶみたいで、他にもいろんな種類があるので、興味がある方は"JavaScript 正規表現"とかでググってみてください!

.slice()でできること

.slice()は、リストに対して使えるメソッドです。
()内に、リストの何番目から何番目までの指定された範囲の部分文字列を出力します。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
console.log(citrus);   //["Orange","Lemon"]が出力される

もっとわかりやすい説明があったので別サイトから引用させていただきます!

"Thank you"という文字列を例に考えてみます。文字列は9個の文字が含まれており各文字に対するインデックスは次の通りです。

T   0
h   1
a   2
n   3
k   4
    5
y   6
o   7
u   8

この時、sliceメソッドを使用すると次のような部分文字列を取得できます。

slice(0, 1) --> "T"
slice(0, 2) --> "Th"
slice(0, 3) --> "Tha"
slice(0, 4) --> "Than"
slice(0, 5) --> "Thank"
slice(3, 7) --> "nk y"
slice(0) --> "Thank you"
slice(6) --> "you"

出典:
sliceメソッド - Stringクラス - JavaScript入門
https://www.ajaxtower.jp/js/string_class/index6.html

不要な要素をsliceで削る

不要な要素をsliceを使って削るやり方を記載します。以下のように使えます。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var cutfruits = fruits.slice(0,-1);  //一番最後の要素から1番目を削除
console.log(cutfruits);  //["Banana", "Orange", "Lemon", "Apple"]

という具合にも使えます。

splitとsliceをうまく使えば、自分が処したいかたちのデータに変形することができるので、試してみてください!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
26
Help us understand the problem. What are the problem?