JavaScriptの文字列操作の便利なTips集！初心者でもすぐ使えるテクニック

1. 文字列の長さを調べる

1. 文字列の長さを調べる

文字列の長さを知りたいときはlengthプロパティを使います。長さを知ることでループ処理や条件分岐に活用できます。

const str = "JavaScript";
console.log(str.length);

10

この例では文字数が10と表示されます。空白も1文字として数えられるので注意しましょう。

2. 文字列の一部分を取り出す

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. 文字列を分割・結合する

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. 文字列の置換

4. 文字列の置換

文字列の一部を別の文字に置き換えたいときはreplace()を使います。

const str = "Hello World";
const newStr = str.replace("World", "JavaScript");
console.log(newStr);

Hello JavaScript

文字列全体の置換には正規表現を使うと便利です。

5. 大文字・小文字の変換

5. 大文字・小文字の変換

文字列を簡単に大文字や小文字に変換できます。

const str = "JavaScript";
console.log(str.toUpperCase()); // 大文字
console.log(str.toLowerCase()); // 小文字

JAVASCRIPT
javascript

ユーザー入力を統一したり、比較処理で便利です。

6. 文字列の先頭・末尾の空白を削除

6. 文字列の先頭・末尾の空白を削除

文字列の前後にある不要な空白を削除するにはtrim()を使います。

const str = "   JavaScript   ";
console.log(str.trim());

JavaScript

入力値の確認やデータ整理で役立つ基本テクニックです。

7. 文字列の検索

7. 文字列の検索

文字列に特定の文字や単語が含まれるか確認するにはincludes()やindexOf()を使います。

const str = "JavaScript Tips";
console.log(str.includes("Tips")); // true
console.log(str.indexOf("Script")); // 4（見つからない場合は-1）

条件分岐でよく使う便利なテクニックです。

8. 文字列の繰り返し

8. 文字列の繰り返し

文字列を繰り返したい場合はrepeat()を使います。

const str = "Hi! ";
console.log(str.repeat(3));

Hi! Hi! Hi! 

簡単に繰り返し文字列を生成できるので、UIや装飾などで活用できます。

9. Tipsの活用ポイント

9. Tipsの活用ポイント

文字列操作のTipsを組み合わせることで、文字列の分析、変換、整形が簡単に行えます。初心者でもlength、substring、split、replaceなどを覚えるだけでかなり便利に扱えます。