JavaScript - 文字列 切り出し（split、substr、substring、slice）

Javascriptstring

JavaScriptで文字列を切り取るときは、 split(), substr(), substring(), slice() を使うことができます。これらの関数がどのように文字列を切り取るかを使用する方法を紹介します。

1. split() : 区切り文字で文字列を分離して配列に戻す

split() の Syntax は次のようになります。引数で区切り文字と limit を受け取ります。 limitは、区切り文字で区切る文字列の数です。 例でどのように動作するかを見てみましょう。

string.split(splitter, limit);

1.1 区切り文字のみ引数として渡す

区切り文字だけが引数として渡されると、文字列を区切り文字で区切り、配列に入れて返します。

let str = 'Hello, World, Javascript';

console.log(str.split(','));

Output:

[ 'Hello', ' World', ' Javascript' ]

1.2 区切り文字と limit を引数として渡す

limitは区切り文字で区切る文字列の数になります。 limitで0を渡すと空の配列が返され、1を渡すと区切り文字で1つの文字列だけが切り捨てられ、配列に返されます。

let str = 'Hello, World, Javascript';

console.log(str.split(',', 0));
console.log(str.split(',', 1));
console.log(str.split(',', 2));
console.log(str.split(',', 3));

Output:

[]
[ 'Hello' ]
[ 'Hello', ' World' ]
[ 'Hello', ' World', ' Javascript' ]

1.3 区切り文字と limit を渡さない

引数として何も渡さない場合は、文字列全体を配列に入れて返します。長さが1の配列になります。

let str = 'Hello, World, Javascript';

console.log(str.split());

Output:

[ 'Hello, World, Javascript' ]

1.4正規表現（Regex）で文字列を切り捨てる

以下のように正規表現を引数に渡して文字を切り取ることができます。

let str = 'Hello,World?Java!script';
let arr = str.split(/[!,?]/);

console.log(arr);

Output:

[ 'Hello', 'World', 'Java', 'script' ]

1.5 Destructuring

以下のように [a, b, c] のように返されると、各変数に値が格納されます。

let str = 'Hello World Javascript';

let [a, b, c] = str.split(' ');

console.log(a);
console.log(b);
console.log(c);

Output:

Hello
World
Javascript

2. substr() : 特定のIndexで希望の長さだけ切り捨てて文字列として返す

substr() の Syntax は以下のようになります。 start は Index であり、この Index から引数に渡した長さだけ文字列を切り取り、文字列として返します。

str.substr(start , length)

substr(5) のように start だけを渡すと、start から文字列の最後まで切り捨てて返します。 substr(0, 5) は Index 0 から長さ 5 だけ文字列を切り取り返します。

let str = 'HelloWorldJavascript';

let a = str.substr(5);
let b = str.substr(0, 5);
let c = str.substr(0, 10);

console.log(a);
console.log(b);
console.log(c);

Output:

WorldJavascript
Hello
HelloWorld

2.1 startが負の場合

start が負の場合、文字列の最後から前方に数だけ移動したものが start Index になります。以下の例では、Index -6はIndex 15になります。

let str = 'HelloWorldJavascript';

let a = str.substr(-6);
let b = str.substr(-6, 3);
let c = str.substr(-6, 5);

console.log(a);
console.log(b);
console.log(c);

Output:

script
scr
scrip

3. substring() : 開始Indexから終了Indexまで文字列を切り捨てて返す

substring() の Syntax は次のようになります。 Index startを含み、Index endを含まない文字列を切り捨てて返します。

str.substring(start, end)

substring(6)のようにstartだけを渡すと、startから最後まで文字列を切り捨てます。 substring(6, 8) は、Index 6 から Index 8 を含まない Index 7 まで文字列を切り捨てます。

let str = 'Hello World Javascript';

let a = str.substring(6);
let b = str.substring(6, 8);
let c = str.substring(6, 0);

console.log(a);
console.log(b);
console.log(c);

Output:

World Javascript
Wo
Hello

4. slice() : substringに似ていますが、少し違うメソッド

slice() の Syntax は以下の通りで、見てわかるように substring() と同じです。動作もほぼ同様ですが、若干違いがあります。 違いは、例でもう一度説明します。

str.slice(start, end)

以下の例は、上記の substring() の例でキーワードだけを slice() に変更しました。ほぼ同じように動作するため、結果は同じです。

let str = 'Hello World Javascript';

let a = str.slice(6);
let b = str.slice(6, 8);
let c = str.slice(6, 0);

console.log(a);
console.log(b);
console.log(c);

Output:

World Javascript
Wo
Hello

4.1 sliceとsubstringの違い

引数として負数が渡されると、 substring() は空の文字列を返します。しかし、 slice()は負のIndexを適用して文字列を切り捨てます。

let str = 'Hello World Javascript';

let a = str.substring(0, -6);
let b = str.slice(0, -6);

console.log(a);
console.log(b);

結果を見ると、substringは空の文字列を返しましたが、sliceは 0から 15(-6)まで切りました。


Hello World Java

Related Posts

codechachaCopyright ©2019 codechacha