JavaScriptでの文字列切り出しを紹介｜文字列操作関数で文字列を切り出す方法
- システム
エンジニア - JavaScriptでの文字の切り出し方法を教えてください。
- プロジェクト
マネージャー - では、文字の切り出し方法についての基本から見ていきましょう。
JavaScriptでの文字列切り出し方法
今回は、JavaScriptでの文字列切り出し方法について説明します。JavaScriptでは、文字列の左からN文字切り出したり、右からN文字切り出したりすることができます。
ここでは、substr、substring、slice、charAtなどの文字列操作関数を使用した、文字列切り出し方法を紹介します。JavaScriptでの文字列切り出しに興味のある方はぜひご覧ください。
左からN文字切り出し
JavaScriptでは、左からN文字分の文字列切り出しができます。ここでは、substr、substring、slice関数を使用した切り出し方法を紹介します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var str = "あいうえお";
// 左から3文字分の文字列切り出し
var result1 = str.substr(0, 3);
var result2 = str.substring(0, 3);
var result3 = str.slice(0, 3);
console.log(result1); // あいう
console.log(result2); // あいう
console.log(result3); // あいう
|
実行結果は以下のようになります。
|
1
2
3
|
あいう
あいう
あいう
|
substr、substring、slice関数は以下のように使用します。
・str.substr(開始位置, 文字数);
・str.substring(開始位置, 終了位置);
・str.slice(開始位置, 終了位置);
開始位置および終了位置は文字列のインデックスです。”0″を指定すると1文字目を意味します。
このようにJavaScriptでは、左からN文字分の文字列切り出しができます。
左からN文字以降切り出し
JavaScriptでは、左からN文字目以降の文字列切り出しができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var str = "あいうえお";
// 左から4文字以降の文字列切り出し
var result1 = str.substr(3);
var result2 = str.substring(3);
var result3 = str.slice(3);
console.log(result1); // えお
console.log(result2); // えお
console.log(result3); // えお
|
実行結果は以下のようになります。
|
1
2
3
|
えお
えお
えお
|
substr、substring、slice関数の第2引数を省略すると、開始位置以降の文字列を切り出せます。このようにJavaScriptでは、左からN文字目以降の文字列切り出しができます。
右からN文字切り出し
JavaScriptでは、右からN文字分の文字列切り出しができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var str = "あいうえお";
// 右から3文字分の文字列切り出し
var result1 = str.substr(-3);
var result2 = str.substr(str.length - 3);
var result3 = str.substring(str.length - 3);
var result4 = str.slice(-3);
var result5 = str.slice(str.length - 3);
console.log(result1); // うえお
console.log(result2); // うえお
console.log(result3); // うえお
console.log(result4); // うえお
console.log(result5); // うえお
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
うえお
うえお
うえお
うえお
うえお
|
substr、slice関数にマイナスを指定すると、右からN文字分の文字列切り出しができます。
また、substr、substring、slice関数について、開始位置に[str.length – 3]を指定することで同じことができます。
このようにJavaScriptでは、右からN文字分の文字列切り出しができます。
中ほどからN文字切り出し
JavaScriptでは、中ほどからN文字分の文字列切り出しができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var str = "あいうえお";
// 中ほどから3文字分の文字列切り出し
var result1 = str.substr(1, 3);
var result2 = str.substring(1, 4);
var result3 = str.slice(1, 4);
console.log(result1); // いうえ
console.log(result2); // いうえ
console.log(result3); // いうえ
|
実行結果は以下のようになります。
|
1
2
3
|
いうえ
いうえ
いうえ
|
substr関数の第2引数は”文字数”なので、3を指定します。substring、slice関数の第2引数は”終了位置”なので、1+3で4を指定します。
このようにJavaScriptでは、中ほどからN文字分の文字列切り出しができます。
左からN文字目を切り出し
JavaScriptでは、左からN文字目の文字列切り出しができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var str = "あいうえお";
// 左から3文字目の文字列切り出し
var result1 = str.substr(2, 1);
var result2 = str.substring(2, 3);
var result3 = str.slice(2, 3);
var result4 = str.charAt(2);
console.log(result1); // う
console.log(result2); // う
console.log(result3); // う
console.log(result4); // う
|
実行結果は以下のようになります。
|
1
2
3
4
|
う
う
う
う
|
substr関数の第2引数は”文字数”なので、”1″を指定することで1文字分が切り出せます。
substring、slice関数の第2引数は”終了位置”なので、”開始位置+1″を指定することで1文字分が切り出せます。
また、charAt関数を使用することで、ダイレクトに1文字切り出せます。このようにJavaScriptでは、左からN文字目の文字列切り出しができます。
右からN文字目を切り出し
JavaScriptでは、右からN文字目の文字列切り出しができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var str = "あいうえお";
// 右から2文字目の文字列切り出し
var result1 = str.substr(-2, 1);
var result2 = str.substring(str.length -2, str.length -1);
var result3 = str.slice(-2, str.length -1);
var result4 = str.charAt(str.length -2);
console.log(result1); // え
console.log(result2); // え
console.log(result3); // え
console.log(result4); // え
|
実行結果は以下のようになります。
|
1
2
3
4
|
え
え
え
え
|
このようにJavaScriptでは、右からN文字目の文字列切り出しができます。
- システム
エンジニア - 関数を利用して切り出していくのですね。
- プロジェクト
マネージャー - そうですね。ケースに応じて最適な関数を選択して、文字の切り出しをマスターしていきましょう。
まとめ
いかがでしたでしょうか。JavaScriptでは、文字列の左からN文字切り出したり、右からN文字切り出したりすることができます。
substr、substring、slice、charAt関数などを使用した切り出し方法について紹介しました。ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryのセレクタの基本的な使い方【HTML要素を指定する】
Webページを作成していると、「ここはこんな動きにしたい」と思うことがあるのではないでしょうか。そこで活躍するのが、jQueryのセレクタです。この記事では、jQueryを利用する上で必須の「セレクタ」について解説してい […]
-
jQuery UIのSortableを使ってリストをドラッグで並び替える
jQuery UIのSortableウィジェットを使うと、リスト項目をドラッグで並び替えることができるようになります。ユーザーにとってより使いやすいアプリケーションを作ることができますので、ぜひ使い方をマスターしていきま […]
-
JavaScriptのwhile文のポイント3つ｜ループの処理方法も解説
JavaScriptの「while文」とは？ 今回紹介するwhile文はループ処理を記述するための基本構文の1つでJavaScriptに限らず多くのプログラム言語で利用できます。 なお、JavaScriptではループ処理 […]
-
JavaScriptでのDOM操作とは｜さらに活用する3つの方法
DOM操作とは？ DOM（Document Object Model）とは、JavaScriptでhtmlを参照・操作するときに使用される、Webブラウザがhtmlを解析したときに構築されるhtmlの構造です。 DOMの […]
-
jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！
jQueryでのValidationの使い方を紹介します 今回は、jQueryでのValidationの使い方について説明します。 Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須 […]
