JS 文字列操作の基本文字列メソッドを理解しよう

今回はJavaScriptの「文字列」にまつわる記述方法について見ていきます。

基本的な内容になりますが、非常によく使われるメソッドも登場しますので、ぜひ実際にコードを書いてみてどのように動作するのか、一つ一つご自身で確認するようにしてください。

なお、簡単なコーディングの方法としては、ブラウザのデベロッパーツールを使うのが最も簡単です。

一番上に「コンソール」と書かれた部分がありますので、そちらをクリックしてコードを書いてみてください。

文字の長さを調べる

let textType = 'aftercovid20';
textType.length;
12

文字の長さを調べる場合は、「length」プロパティを使用します。

ここでは「aftercovid20」の文字の長さ「12」が返されています。

let textType = 'aftercovid20'; 
textType[0];
'a'

特定の文字を返す場合は、「[]」角括弧を使用します。

textType[textType.length-1]
'0'

最後の文字列を返す場合は、「length」プロパティを使うことが出来ます。

その際は「-1」を記述しますが、これは文字列は「12」ですが、数えるのは「０」から数えるためになります。

let textType = 'aftercovid20'; 
textType.indexOf('covid');
5

文章の中に同じ文字列があるかどうか確認する場合に使われるのが、「indexOf()」になります。

返される値は、指定した文字列が始まる場所の数値を返します。

ここでは「５」が返されていますが、先程と同様に「０」から数えるためになります。

対象の文字列がなかった場合は、「-1」を返します。

let textType = 'aftercovid20'; 
textType.slice(5,10);
'covid'

文字列がどこから始まり、どこで終わっているか分かっている場合は、その文字列を返すことが出来ます。

メソッドは、「slice()」を使い、開始位置と終了位置を「()」の中に記述します。

let textType = 'aftercovid20'; 
textType.slice(5);
'covid20'

「何番目以降の文字すべて」などを返したい場合は、先程の「slice」を使って「()」内に特定の数値を記述します。

ここでは５番目以降の文字列が返されています。

let textType = 'aftercovid20'; 
textType.toUpperCase();
'AFTERCOVID20'

文字列を大文字切り替える場合は、「toUpperCase()」メソッドを使います。

ここではすべての文字列を大文字に切り替えていますが、「()」内に特定の数値を記述すればその文字だけを大文字変換してくれます。

let textType = 'AFTERCOVID20';
textType.toLowerCase();
'aftercovid20'

大文字を小文字に切り替える場合は、「toLowerCase()」メソッドを使います。

先程と同様に、「()」内に数値を記述することで、特定の数値を小文字に切り替えることが出来ます。

let textType = 'AFTERCOVID20';
textType.replace('COVID', 'covid');
'AFTERcovid20'

文字列の一部を書き換える場合は「replace()」メソッドを使用します。

「()」内に、変更したい文字列をクオテーションで囲って、変更する文字列をクオテーションで囲って記述します。

但し、上に書いた記述方法は、元になる変数自体を変更したわけではありません。

変数自体を変更する場合は以下のように記述します。

let textType = 'AFTERCOVID20';
textType= textType.replace('COVID', 'covid');
'AFTERcovid20'
textType;
'AFTERcovid20'

先程記述した、「textType.replace(‘COVID’, ‘covid’);」の前に、「textType =」と記述します。

変数が「AFTERcovid20」に変わっているのが確認出来ると思います。

	意味
.length	文字の長さを返す
変数[]	[]に指定した特定の文字を返す
indexOf()	()内の指定した文字列が始まる数値を返す文字列がない場合は「-1」を返す
slice()	特定の文字列を返す（例）slice(5,10)：5番目から10番目までの文字列 slice(5)：5番目以降の文字列
toUpperCase()	大文字に切り替える
toLowerCase()	小文字に切り替える
replace()	文字の一部分を書き換える