JavaScriptの勉強05-3【文字列メソッド】

前回、テンプレートリテラルを用いて便利にソースコードを書くことを学びました。

今回は、文字列メソッドについて学んでいきます。

前回の記事

micche-labo.hatenablog.com

はじめに

このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！
玄人の方はどうぞ温かい目で見守っていてください。

なにか間違い・助言あれば、ご教授おねがいします。

勉強方法：Chromeのデベロッパーツールでコンソールを開いて実行。

文字列メソッド

文字列に使える便利機能。

文字列の数を数えるlengthとか developer.mozilla.org

検索機能indexOfとか developer.mozilla.org

文字列の中から指定された部分の文字を返すsubstringとか developer.mozilla.org

いろいろあるようです。

文字列オブジェクト生成

文字列プリミティブと文字列オブジェクトという2種類があるみたいです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/String

文字列プリミティブ

const string = '文字列プリミティブ'; //シングルクォート
const string2 = "文字列プリミティブ"; //ダブルクォート
const string3 = `文字列プリミティブ`; //バッククォート

//以下コンソールでの実行結果

string; // 結果 '文字列プリミティブ'
string2; //結果 '文字列プリミティブ'
string3; //結果 '文字列プリミティブ'

//typeofで調べた結果
typeof string; //結果 'string'

文字列オブジェクト

const string4 = new String('文字列オブジェクト');

//以下コンソールでの実行結果

string4; //結果 String {'文字列オブジェクト'} と返される

//typeofで調べた結果
typeof string4; //結果 'object'

newとつけることで、objectとして扱われるようです。

Stringだけだと、単にstringと返ってきます。

const string5 = String('文字列');

//以下コンソールでの実行結果
string5; //結果 '文字列'
typeof string5; //結果 'string'

以下参照 developer.mozilla.org

文字の長さを調べる

lengthを使用すると簡単に調べられます。

試しにこのブログのタイトルの長さを調べてみましょう。

let blogTitle = 'みっちぇのWebデザイン研究所';
blogTitle.length; //変数名.length の形
//結果
15

当ブログタイトルは15文字であることがわかりました。

よくある文字数計算のシステムはこれを使用しているのかなあ？

（MDNのサイトによると、登録フォーム等でユーザ名の文字数制限するときとかに使用されることが多いらしいです。）

文字へアクセスする

2パターンある。

例えば以下のような文でで、６番目の文字を参照したい時。

//変数宣言
const text = 'こんにちは、みなさん。お元気ですか？';
const index = 6; //「こ」は0番目。そこから数えて6番目。

// charAtで求める
text.charAt(index);
//結果
'み'

このように、charAtで求めることができます。

同じ文章から別の箇所を参照したいときは

const index2 = 0; //0番目を参照

//実行
text.charAt(index2);
//結果
'こ'

とできる。

もう一つ、文字列を配列のように扱うやり方。

text[1]; //「こんにちは」の1番目の文字が返される。（0から数えるので「こ」は0番目。）
'ん'

文字へアクセスその２

後ろから数えたい時。 [ ]の中に変数名+.length-1を入れて使用。

let blogTitle = 'みっちぇのWebデザイン研究所';
blogTitle[blogTitle.length-1];
//結果
'所'

数字を変えると…

blogTitle[blogTitle.length-3];
//結果
'研'

文字も変わる。

文字列の中から文字列を探し出す

以下のコードでは、「みっちぇのWebデザイン研究所」の中に、「Web」という文字があり、それが何文字目なのかを教えてくれます。

文字列の中に指定した文字があった場合

//変数宣言
let blogTitle = 'みっちぇのWebデザイン研究所';
//実行
blogTitle.indexOf('Web');
//結果
5

文字列の中に指定した文字がなかった場合

もしもない文字を指定した場合は、

//実行
blogTitle.indexOf('はなこ');
//結果
-1

と、-1を返されます。

文字列の中で文字を抜き出す

sliceを使用します。

//0文字目〜4文字目を抜き出す
blogTitle.slice(0,4);
//結果
'みっちぇ'

//3文字目以降全て抜き出す
blogTitle.slice(4);
//結果
'のWebデザイン研究所'

//5文字目〜8文字目を抜き出す
blogTitle.slice(5,8);
//結果
'Web'

大文字・小文字の変換

toLowerCase()とtoUpperCase()という便利なメソッドが使用できます。

//変数宣言
let blogTitle = 'My Blog is Micche no Web design Lab.';

//小文字にする
blogTitle.toLowerCase();
'my blog is micche no web design lab.'

//大文字にする
blogTitle.toUpperCase();
'MY BLOG IS MICCHE NO WEB DESIGN LABO.'

小文字にしたければ変数名.toLowerCase()を。
大文字にしたけれ変数名.toUpperCase()を使用。

文字列を書き換える

replace()メソッドを使用することで、指定した文字列を違う文字列に書き変えることができる。

blogTitle.replace('Micche','みっちぇ'); //Miccheをみっちぇに書き換え
//結果
'My Blog is みっちぇ no Web design Lab.'
//このままだと更新されていない
blogTitle
//結果
'My Blog is Micche no Web design Lab.' //最初の文のまま

//更新するには代入してやる必要がある
blogTitle = blogTitle.replace('Micche','みっちぇ'); //blogTitleに代入
blogTitle
//結果
'My Blog is みっちぇ no Web design Lab.' //きちんと変更できました！

文字列を比較する

<小なり、>大なり　演算子を使用して比較できる。
==を使用することで、大文字・小文字を区別して等しいかどうか判断してくれる。

演算子についての記事はこちら micche-labo.hatenablog.com micche-labo.hatenablog.com

文字列の比較その１

あといを比較します。

「文字の大きい小さいってなんやねん」て思いましたが、プログラム的にはあはいより小さいってことになるらしいです。 （あいうえおで順に考えるってことでしょうか…？）

一例。

let a = 'あ'
let b = 'い'

// aがbより小さいとき。「あ」は「い」より小さいのでtrue。
if (a < b) {
  console.log(a + ' は ' + b + ' より小さい') //これが反映される
//aがbより大きいとき
} else if (a > b) {
  console.log(a + ' は ' + b + ' より大きい')
//上の二つの条件どちらでもない時
} else {
  console.log(a + ' と ' + b + ' は等しい')
}
//結果
あ は い より小さい

文字列の比較その２

「う」と「い」を比較します。
条件式の中身はそのままです。

let a = 'う'
let b = 'い'

//aがbより小さい
if (a < b) { // false。「う」は「い」より大きいので。
  console.log(a + ' は ' + b + ' より小さい') //スルーされる
} else if (a > b) {
  console.log(a + ' は ' + b + ' より大きい') //これが反映される
} else {
  console.log(a + ' と ' + b + ' は等しい')
}

//結果
う は い より大きい

文字列比較その３

今度は「あ」と「あ」を比較します。
こちらも条件式の中身は同じ。

let a = 'あ'
let b = 'あ'

//aとbが等しい時。
if (a < b) { // false。「あ」は「あ」と同じなので。
  console.log(a + ' は ' + b + ' より小さい') //スルーされる
} else if (a > b) {
  console.log(a + ' は ' + b + ' より大きい') //スルーされる
} else {
  console.log(a + ' と ' + b + ' は等しい') //反映される
}

//結果
あ と あ は等しい

３つとも違う結果が返りました。

休憩

文字列にはもっとたくさんの便利メソッドがあるようです。

ですが頭がパンクしそうなので、今回はここまで。

次回から配列を学びます！
引き続き頑張って勉強してまいります…！！！

余談 ずっと研究所って「labo」だと思ってたんですが正しい綴りは「lab」でした。「o」いらなかった…。url、恥ずかしい😣