JavaScriptの文字列操作の便利なTips集！初心者でもすぐ使えるテクニック
生徒
「先生、文字列操作って基本はわかるんですけど、もっと便利に使える方法ってありますか？」
先生
「ありますよ。JavaScriptには文字列を簡単に操作できる便利な方法やTipsがたくさんあります。」
生徒
「例えばどんなことができますか？」
先生
「文字列の長さを調べたり、特定の文字を置き換えたり、文字を分割したり結合したり、いろいろです。順番に見ていきましょう。」
1. 文字列の長さを調べる
文字列の長さを知りたいときはlengthプロパティを使います。長さを知ることでループ処理や条件分岐に活用できます。
const str = "JavaScript";
console.log(str.length);
10
この例では文字数が10と表示されます。空白も1文字として数えられるので注意しましょう。
2. 文字列の一部分を取り出す
文字列の一部だけ取り出したい場合はsubstring()やslice()を使います。
const str = "JavaScript";
console.log(str.substring(0, 4)); // 0から4の手前まで
console.log(str.slice(4)); // 4文字目から最後まで
Java
Script
substring()は開始位置から終了位置の手前までを取得し、slice()は負の数も使って文字列の後ろから取得できます。
3. 文字列を分割・結合する
文字列を配列のように分割したり、配列から文字列に結合することも便利です。
const str = "apple,banana,orange";
const fruits = str.split(","); // カンマで分割
console.log(fruits);
const joined = fruits.join(" | "); // 配列を文字列に結合
console.log(joined);
["apple", "banana", "orange"]
apple | banana | orange
分割した後に配列操作もできるので、文字列処理の幅が広がります。
4. 文字列の置換
文字列の一部を別の文字に置き換えたいときはreplace()を使います。
const str = "Hello World";
const newStr = str.replace("World", "JavaScript");
console.log(newStr);
Hello JavaScript
文字列全体の置換には正規表現を使うと便利です。
5. 大文字・小文字の変換
文字列を簡単に大文字や小文字に変換できます。
const str = "JavaScript";
console.log(str.toUpperCase()); // 大文字
console.log(str.toLowerCase()); // 小文字
JAVASCRIPT
javascript
ユーザー入力を統一したり、比較処理で便利です。
6. 文字列の先頭・末尾の空白を削除
文字列の前後にある不要な空白を削除するにはtrim()を使います。
const str = " JavaScript ";
console.log(str.trim());
JavaScript
入力値の確認やデータ整理で役立つ基本テクニックです。
7. 文字列の検索
文字列に特定の文字や単語が含まれるか確認するにはincludes()やindexOf()を使います。
const str = "JavaScript Tips";
console.log(str.includes("Tips")); // true
console.log(str.indexOf("Script")); // 4（見つからない場合は-1）
条件分岐でよく使う便利なテクニックです。
8. 文字列の繰り返し
文字列を繰り返したい場合はrepeat()を使います。
const str = "Hi! ";
console.log(str.repeat(3));
Hi! Hi! Hi!
簡単に繰り返し文字列を生成できるので、UIや装飾などで活用できます。
9. Tipsの活用ポイント
文字列操作のTipsを組み合わせることで、文字列の分析、変換、整形が簡単に行えます。初心者でもlength、substring、split、replaceなどを覚えるだけでかなり便利に扱えます。
