.net column
.NET開発者のためのブログメディア

JavaScriptでの文字列切り出しを紹介|文字列操作関数で文字列を切り出す方法

2020年08月27日

SE
JavaScriptでの文字の切り出し方法を教えてください。

PM
では、文字の切り出し方法についての基本から見ていきましょう。

JavaScriptでの文字列切り出し方法


今回は、JavaScriptでの文字列切り出し方法について説明します。JavaScriptでは、文字列の左からN文字切り出したり、右からN文字切り出したりすることができます。

ここでは、substr、substring、slice、charAtなどの文字列操作関数を使用した、文字列切り出し方法を紹介します。JavaScriptでの文字列切り出しに興味のある方はぜひご覧ください。

左からN文字切り出し

JavaScriptでは、左からN文字分の文字列切り出しができます。ここでは、substr、substring、slice関数を使用した切り出し方法を紹介します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

substr、substring、slice関数は以下のように使用します。
・str.substr(開始位置, 文字数);
・str.substring(開始位置, 終了位置);
・str.slice(開始位置, 終了位置);

開始位置および終了位置は文字列のインデックスです。”0″を指定すると1文字目を意味します。

このようにJavaScriptでは、左からN文字分の文字列切り出しができます。

左からN文字以降切り出し

JavaScriptでは、左からN文字目以降の文字列切り出しができます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

substr、substring、slice関数の第2引数を省略すると、開始位置以降の文字列を切り出せます。このようにJavaScriptでは、左からN文字目以降の文字列切り出しができます。

右からN文字切り出し

JavaScriptでは、右からN文字分の文字列切り出しができます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

substr、slice関数にマイナスを指定すると、右からN文字分の文字列切り出しができます。
また、substr、substring、slice関数について、開始位置に[str.length – 3]を指定することで同じことができます。

このようにJavaScriptでは、右からN文字分の文字列切り出しができます。

中ほどからN文字切り出し

JavaScriptでは、中ほどからN文字分の文字列切り出しができます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

substr関数の第2引数は”文字数”なので、3を指定します。substring、slice関数の第2引数は”終了位置”なので、1+3で4を指定します。

このようにJavaScriptでは、中ほどからN文字分の文字列切り出しができます。

左からN文字目を切り出し

JavaScriptでは、左からN文字目の文字列切り出しができます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

substr関数の第2引数は”文字数”なので、”1″を指定することで1文字分が切り出せます。
substring、slice関数の第2引数は”終了位置”なので、”開始位置+1″を指定することで1文字分が切り出せます。

また、charAt関数を使用することで、ダイレクトに1文字切り出せます。このようにJavaScriptでは、左からN文字目の文字列切り出しができます。

右からN文字目を切り出し

JavaScriptでは、右からN文字目の文字列切り出しができます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

このようにJavaScriptでは、右からN文字目の文字列切り出しができます。

SE
関数を利用して切り出していくのですね。

PM
そうですね。ケースに応じて最適な関数を選択して、文字の切り出しをマスターしていきましょう。

まとめ

いかがでしたでしょうか。JavaScriptでは、文字列の左からN文字切り出したり、右からN文字切り出したりすることができます。

substr、substring、slice、charAt関数などを使用した切り出し方法について紹介しました。ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs