トモジstringオブジェクトって何？
詳しく知りたい・・・
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、stringオブジェクトに関して要点をわかりやすく説明しております。
1.JavaScriptのstringオブジェクト
stringオブジェクトは、
文字列型を扱うためのオブジェクトになり
抽出や加工・検索などの機能を提供してます。
非常にたくさんの機能が提供されておりますので、
今回は前編(オレンジ枠)を説明していきます。
2.検索
stringオブジェクトの検索は、以下の5種類の
メンバーがありますので順番に見ていきましょう。
indexOf
indexOfは、
文字列の中に指定した文字があるか確認できます。
検索した文字がある場合は位置の番号を返し、
検索した文字がない場合は、[-1]を返します。
indexOfに関して
var str1 = "あいうえお";
var str2 = ['あいうえお','かきくけこ','さしすせそ'];
console.log(str1.indexOf('い'));
console.log(str2.indexOf('さしすせそ'));
console.log(str2.indexOf('あ'));1
2
-1
lastIndexOf
lastIndexOfは、最後の文字を探し
重複している場合は最後の同一文字を判別します。
lastIndexOfに関して
var str = "あいうえおあいうえお";
console.log(str.lastIndexOf('い'));6
startsWith
startsWithは、
指定した文字で始まるかを判別します。
startsWithに関して
var str = "あいうえお";
console.log(str.startsWith('あ'));
console.log(str.startsWith('い'));
console.log(str.startsWith('あいう'));true
false
true
endsWith
endsWithは、
指定した文字で終わるかを判別します。
endsWithに関して
var str = "あいうえお";
console.log(str.endsWith('あ'));
console.log(str.endsWith('お'));
console.log(str.endsWith('えお'));false
true
true
includes
includesは、
指定した文字が含まれているかを判別します。
includesに関して
var str = "あいうえお";
console.log(str.includes('い'));
console.log(str.includes('いうえ'));
console.log(str.includes('か'));true
true
false
3.部分文字列
stringオブジェクトの部分文字列は、
以下の5種類のメンバーがありますので
順番に見ていきましょう。
charAt
charAtは、指定した番号の文字を取得できます。
charAtに関して
var str = "あいうえお";
console.log(str.charAt(2));う
slice
sliceは、スタート位置とエンド位置(エンド位置は含まない)を決めて文字を取得できます。
※エンドを指定しないと最後まで取得する
sliceに関して
var str = "あいうえお";
console.log(str.slice(1,3));
console.log(str.slice(2));
console.log(str.slice(3,2));
console.log(str.slice(1,-2));いう
うえお
空文字(何もないこと)
いう
substring
substringは、スタート位置とエンド位置を決めて文字を取得するのでsliceにとても似ています。
しかし、少し違いますのでsliceの説明の後で
違いについても見ていきましょう。
substringに関して
var str = "あいうえお";
console.log(str.substring(1,3));
console.log(str.substring(2));
console.log(str.substring(3,2));
console.log(str.substring(1,-2));いう
うえお
う
あ
sliceとsubstringの違い
sliceとsubstringは、
エンド位置の値がマイナス値や
スタート値がエンド値より大きい値の時に
互いに違う動きを示します。
sliceとsubstringの違いに関して
var str = "あいうえお";
console.log('slice(マイナス値) : ' + str.slice(1, -1));
console.log('slice(スタート値が大きい) : ' + str.slice(3, 1));
console.log('substring(マイナス値) : ' + str.substring(3, -1));
console.log('substring(スタート値が大きい) : ' + str.substring(3, 1));slice(マイナス値) : いうえ
slice(スタート値が大きい) :
substring(マイナス値) : あいう
substring(スタート値が大きい) : いう
str.substring(3,-1)
↓
str.substring(3,0)
↓
str.substring(0,3)
substr
substrは、スタート位置とそこから何文字を
取得するのかを決めることができます。
substrに関して
var str = "あいうえお";
console.log(str.substr(1,3));
console.log(str.substr(1,10));
console.log(str.substr(1));いうえ
いうえお
いうえお
split
splitは、指定した文字で分割をして配列化します。
splitに関して
var str = "あ,いう,えお";
var array = str.split(',');
console.log("array[0]:" + array[0]);
console.log("array[1]:" + array[1]);
console.log("array[2]:" + array[2]);array[0]:あ
array[1]:いう
array[2]:えお
4.正規表現
正規表現とは、
多種多様な文字列を表現する方法です。
stringオブジェクトの正規表現は、
以下の3種類のメンバーがありますので
順番に見ていきましょう。
match
matchは、正規表現で文字列を検索して
合致した部分の文字列を取得します。
matchに関して
const str = "a1234b45-c-6d789ee";
const result = str.match(/\d{2,4}/g);
console.log(result);[“1234”, “45”, “789”]
replace
replaceは、文字列を検索して指定の文字に
変更することができます。
replaceに関して
var str = "こんにちは、トモジです。";
var result = str.replace('トモジ', 'tomoji');
console.log(result);こんにちは、tomojiです。
search
searchは、文字列を検索して合致した部分の
最初の文字位置が取得できます。
searchに関して
var str = "こんにちは、トモジです。";
var result = str.search('トモジ');
console.log(result);6
まとめ
最後にこの記事のポイントをまとめておきます。
stringオブジェクト[検索]
indexOf
文字列の中に指定文字があるかを検索lastIndexOf
文字列の末尾の指定文字を検索startsWith
指定した文字で始まるかを判別endsWith
指定した文字で終わるかを判別includes
指定した文字が含まれているかを判別
stringオブジェクト[部分文字列]
charAt
指定した番号の文字を取得slice
スタートとエンドを決めて文字を取得substring
スタートとエンドを決めて文字を取得substr
スタートとそこから指定文字数を取得split
指定した文字で分割をして配列化
stringオブジェクト[正規表現]
match
検索して合致した部分の文字列を取得replace
検索して指定の文字に変更search
検索して合致した最初の文字位置を取得
