今日は、テキストデータを自由自在に扱うために欠かせない 「文字列（Strings）」 の主要なプロパティとメソッドについてまとめます。
JavaScriptでテキストを加工・操作する様々な方法。
1. 文字列を作る3つの方法
JavaScriptでは、以下の3つの記号を使って文字列を表現できます。
-
二重引用符(ダブルクォート) / 一重引用符(シングルクォート):
"Hello",'World' -
バッククォート (Backtick):
H1``
バッククォートを使用すると、${変数名} という形式で文字列の中に変数を簡単に埋め込むことができます（テンプレートリテラル）。
2. よく使われる文字列のプロパティとメソッド
1. 長さの確認と大文字・小文字変換
-
.length: 文字列の全体の長さを返します（プロパティ）。 -
.toUpperCase()/.toLowerCase(): すべての文字を大文字、または小文字に変換します。
2. 位置の検索と切り出し
-
.indexOf("検索文字"): 特定の文字が何番目のインデックス（0から開始）にあるかを探します。 -
.slice(start, end): 文字列の特定の部分だけを切り出して取得します。
3.置換と包含の確認
-
.replace("A", "B"): 文字列内の「A」を「B」に置き換えます。 -
.includes("キーワード"): 特定の単語が含まれているかを確認し、trueまたはfalseを返します。
4. 空白削除と開始・終了の判定
-
.trim(): 文字列の両端にある不要な空白を削除します。ユーザー入力の精査に必須です。 -
.startsWith()/.endsWith(): 特定の文字で始まっているか、または終わっているかを判定します。URLのチェックなどに便利です。
let text = "javaScriptは面白い？";
let output = "";
output += `長さ: ${text.length}<br>`; // 15
output += `大文字: ${text.toUpperCase()}<br>`; // JAVASCRIPTは面白い？
output += `位置検索: ${text.indexOf("は")}<br>`; // 10
output += `切り出し: ${text.slice(0, 10)}<br>`; // javaScript
output += `包含確認: ${text.includes("Java")}<br>`; // true
まとめ
-
テンプレートリテラルの便利さ: + 演算子を使わずに変数と文字列を混ぜて書けるバッククォート(`)が、いかにコードを読みやすくしてくれるか実感しました。
-
メソッドの活用: 特に
.trim()や.includes()は、ログイン機能や検索機能を実装する際に非常に役立ちそうです。 -
インデックスの注意点: プログラミングでは数字を 0から数える という基本を忘れずに、
.indexOfや.sliceを使いこなしていきたいです。