駆け出しエンジニアの勉強記録

アラフォー女の未経験すぎる業界での勉強記録

【JS】の文字列操作

【文字列】

参考:

文字列(String) - とほほのWWW入門

<文字列の部分取り出し>

trim():前後の空白を取り除いた文字列を返す(文字の間の空白は取り除けない)

<script>
const X =" ABC ".trim();
console.log(X); // 結果 「ABC」
</script>


trimStart():前の空白を取り除いた文字列を返す
trimEnd():後ろの空白を取り除いた文字列を返す

<script>
const X =" ABC".trimStart();
console.log(X); // 結果 「ABC」

const Y ="ABC ".trimEnd();
console.log(Y); // 結果 「ABC」
</script>


slice(何番目の文字 , から何番目1個前の文字まで全て):指定された位置から文字列を切り取り、必要な部分だけを抽出。第二引数省略で残り全ての文字を返す。

<script>
const X ="ABCDEFGHI".slice(2,6);
console.log(X); // 結果 「CDEF」
</script>


substring(何番目の文字 , から何番目1個前の文字)
:指定された範囲の文字列を抽出。最初の文字は0番目になる。第二引数省略で残り全ての文字を返す。

<script>
const X ="ABCDEFG".substring(2,4);
console.log(X); // 結果 「CD」
</script>


substr(何番目の文字 , から何文字抽出するか):指定された文字から指定した長さの文字を抽出。最初の文字は0番目になる。第二引数省略で残り全ての文字を返す。

<script>
const X ="ABCDEFG".substr(2,4);
console.log(X); // 結果 「CDEF」
</script>


<文字列の分割・連結>

split(前後で区切りたい文字):区切り文字を起点として分割して配列で返す。

<script>
const X ="23:59:59".split(":");
console.log(X[0] + "時" + X[1] + "分" + X[2] + "秒"); // 結果 「23時59分59秒」
</script>


"繋げたい文字1".concat("繋げたい文字2" , ""繋げたい文字3"):連結した文字を返す。

<script>
const X ="ABC".concat("猫" , "ペット");
console.log(X); // 結果 「ABC猫ペット」
</script>


"繰り返したい文字".repeat(繰り返したい回数):繰り返した文字を返す。

<script>
const X ="ABC".repeat(3);
console.log(X); // 結果 「ABCABCABC」
</script>


<文字列の置換>
"文章".replace("置き換えたい文字" , "置き換える文字"):指定した文字や文字列を別のものに置き換える

<script>
const X ="This is a Pen".replace("Pen" , "Book");
console.log(X); // 結果 「This is a Book」
</script>


↑"文章".replace("置き換えたい文字" , "置き換える文字")だと、最初に見つかった置き換えたい文字だけ置き換えられるので、置き換えたい文字全て置き換える場合は、
"文章".replaceAll("置き換えたい文字" , "置き換える文字")を使う。

<script>
const X ="AAA".replace("A" , "K");
console.log(X); // 結果 「KAA」

const Y ="AAA".replaceAll("A", "K");
console.log(Y); // 結果 「KKK
</script>


.toUpperCase():大文字に置き換える
.toLowerCase();小文字に置き換える

<script>
const X ="Abc".toUpperCase();
console.log(X); // 結果 「ABC」

const Y ="Abc".toLowerCase();
console.log(Y); // 結果 「abc」
</script>


<文字列の検索>

.indexOf("検索したい文字" , "検索を開始したいインデックス"):検索を開始したいインデックスから検索したい文字が何番目のインデックスにあるのかを返す。インデックスは0スタート。見つからない場合は-1を返す。
※後ろから検索する場合は.lastIndexOf("検索したい文字" , "検索を開始したいインデックス")

<script>
const X ="ABCABC".indexOf("C");
console.log(X); // 結果 「2(番目のインデックス)」

const Y ="ABCABC".indexOf("C" , "3");
console.log(Y); // 結果 「5(番目のインデックス)」
</script>


.startsWith("検索したい文字"):検索したい文字で始まっていればtrue
.endsWith("検索したい文字"):検索したい文字で終わっていればtrue
.includes("検索したい文字"):検索したい文字が含まれていればtrue

<script>
const X ="ABCDEFG".startsWith("ABC");
console.log(X); // 結果 「true」

const Y ="ABCDEFG".endsWith("EFG");
console.log(Y); // 結果 「true」

const Z ="ABCDEFG".includes("HIJ");
console.log(Z); // 結果 「false」
</script>


<文字列のマッチング>

.match(正規表現):文字列が正規表現にいっちしているかどうかを確認。一致していなかったらnullを返す。
正規表現
/調べたい文字/i 大文字、小文字を区別せずに検索
/調べたい文字/ 大文字、小文字を区別して検索
/\d+/ 1つ以上連続している数字

<script>
const X ="ABCDEFG";
if(X.match(/abc/i)){ // abcもしくはABCが一致しているか?
console.log("マッチしています"); // 結果 「マッチしています」
}

const X ="準備した数字は123456";
const numbers = X.match(/\d+/)
console.log(numbers); // 結果 「123456」
</script>


.serch(正規表現):一致する部分のインデックス番号を返す

<script>
//大文字・小文字区別せずedfが何番目のインデックスから含まれているか?→3
// 3 !=(一致しない) 1 → true
if ("ABCDEFG".search(/def/i) != -1) {
console.log("含まれています"); // 結果 「含まれています」
}
</script>


<文字列のパディング(詰め物)>
.padStart(文字列全体の長さ , "何を詰めるか"):前に詰める
.padEnd(文字列全体の長さ , "何を詰めるか"):後ろに詰める

<script>
const X ="123";
console.log(X.padStart(5 , "0")); // 結果 「00123」
console.log(X.padEnd(5 , "_")); // 結果 「123__」
</script>