1. 文字列操作とは？

解説： 文字列操作とは、文字の並びを調べたり、切り出したり、変換したり、置き換えたりする処理のことです。
JavaScriptでは、文字列は String として扱われ、多くの便利なメソッドが用意されています。

● どんな場面で使う？

• ✅ 入力された文字数を数える
• ✅ 前後の空白を削除する
• ✅ 文章の一部だけを取り出す
• ✅ 特定の単語を別の単語に置き換える
• ✅ ある文字が含まれているかを調べる

フォーム入力や検索機能、表示用テキストの加工など、実際のアプリでは非常に出番が多いです。

● 基本の例

const text = 'こんにちは、JavaScript！';

console.log(text.length); // 文字数
console.log(text.includes('Java')); // 含まれているか

2. length と trim()

解説： 文字列操作で最初に覚えたいのが、文字数を調べるための length と、前後の空白を取り除くための trim() です。
どちらもフォーム入力やバリデーションでよく使われます。

● length：文字数を調べる

const text = 'Hello';
console.log(text.length); // 結果 : 5

length はメソッドではなく、プロパティです。
そのため、() は不要です。

● trim()：前後の空白を削除する

const name = '  太郎  ';
console.log(name.trim()); // 結果 : '太郎'

入力欄でスペースだけ入っているケースを防ぐときにとても便利です。

● 実務での使い方

const value = input.value.trim();

if (value.length === 0) {
  console.log('未入力です');
}

trim() と length を組み合わせると、空欄チェックの基本形になります。

3. slice() / substring()

解説： 文字列の一部だけを取り出したいときは、slice() や substring() を使います。
メールアドレスの一部表示や、長い文章の抜粋を作るときなどに役立ちます。

● slice() の基本

const text = 'JavaScript';

console.log(text.slice(0, 4)); // 結果 : Java
console.log(text.slice(4));    // 結果 : Script

最初の引数が開始位置、2つ目の引数が終了位置です。
終了位置は含まれません。

● substring() の基本

const text = 'JavaScript';

console.log(text.substring(0, 4)); // 結果 : Java

基本的な使い方は似ていますが、実務では slice() のほうが見かける機会は多めです。

● 文字列を省略表示する例

const message = 'これはとても長い文章です';
const shortText = message.slice(0, 8) + '...';

console.log(shortText);

4. replace() / replaceAll()

解説： 文字列の一部を別の文字に置き換えたいときは、replace() や replaceAll() を使います。
表示用テキストの調整や、入力値の整形で便利です。

● replace()：最初の1か所を置き換える

const text = 'りんご みかん りんご';
console.log(text.replace('りんご', 'バナナ'));
// 結果 : バナナ みかん りんご

● replaceAll()：すべて置き換える

const text = 'りんご みかん りんご';
console.log(text.replaceAll('りんご', 'バナナ'));
// 結果 : バナナ みかん バナナ

すべて一括で置き換えたいときは、replaceAll() がわかりやすいです。

● 実務での例

const phone = '090-1234-5678';
const normalized = phone.replaceAll('-', '');

console.log(normalized); // 結果 : 09012345678

const text = '　JavaScript 入門　';
const normalized = text.replaceAll('　', ' ').trim();

console.log(normalized); // 結果 : JavaScript 入門

このように、replaceAll() は記号や全角スペースの統一にも便利です。
入力値をきれいに整えてから保存したいときによく使われます。

5. includes() / startsWith() / endsWith()

解説： 文字列の中に特定の文字が含まれているか、先頭や末尾が一致しているかを調べたいときに便利なのが、これらのメソッドです。

● includes()：含まれているか

const email = 'test@example.com';
console.log(email.includes('@')); // 結果 : true

● startsWith()：先頭一致

const url = 'https://example.com';
console.log(url.startsWith('https://')); // 結果 : true

● endsWith()：末尾一致

const fileName = 'photo.png';
console.log(fileName.endsWith('.png')); // 結果 : true

URLチェック、ファイル拡張子チェック、キーワードの有無確認などに役立ちます。

6. split() と大文字小文字変換

解説： 文字列を区切って配列にしたいときや、大文字・小文字を変えたいときもよくあります。
検索や表示、データ整形で出番の多い基本操作です。

● split()：区切って配列にする

const csv = '赤,青,黄';
const colors = csv.split(',');

console.log(colors); // 結果 : ['赤', '青', '黄']

split() は文字列を配列に変える代表的なメソッドです。
逆に、配列から文字列へ戻したいときは配列の join() を使います。

const tags = 'JavaScript, HTML, CSS';
const tagList = tags.split(',').map((tag) => tag.trim());

console.log(tagList); // 結果 : ['JavaScript', 'HTML', 'CSS']

実務では、split() のあとに trim() を組み合わせて、余分な空白を取り除くこともよくあります。

● toUpperCase() / toLowerCase()

const text = 'JavaScript';

console.log(text.toUpperCase()); // 結果 : JAVASCRIPT
console.log(text.toLowerCase()); // 結果 : javascript

英字の比較を安定させたいときは、事前に小文字や大文字へそろえることがよくあります。

● 実行例（デモ）

7. 実践でよくある使い方

解説： 最後に、実務で文字列メソッドがどう使われるか、よくある例を見ておきましょう。
実際には、複数のメソッドを組み合わせて使うことが多いです。

● ユーザー入力の前後空白を削除する

const userName = input.value.trim();

● メールアドレスに @ が含まれるか確認する

if (!email.includes('@')) {
  console.log('メール形式が不正です');
}

● 文章の先頭だけ表示する

const preview = articleText.slice(0, 30) + '...';

● 区切り文字でタグ一覧を作る

const tags = 'JavaScript,HTML,CSS'.split(',');

● 改行区切りの入力を1件ずつ処理する

const lines = textarea.value
  .split('\n')
  .map((line) => line.trim())
  .filter((line) => line !== '');

console.log(lines);

● 表示前に不要な記号を取り除く

const priceText = '1,980円';
const numberText = priceText.replace(',', '').replace('円', '');

console.log(numberText); // 結果 : 1980

こうした細かな処理が積み重なって、使いやすいUIやデータ処理につながっていきます。

8. よくある注意点

解説： 文字列メソッドは便利ですが、初学者の方がつまずきやすいポイントもあります。
基本的な注意点をまとめておきましょう。

● 元の文字列は変更されない

const text = 'hello';
text.toUpperCase();

console.log(text); // 結果 : hello

多くの文字列メソッドは、元の文字列を直接変更せず、新しい文字列を返す形です。

● 大文字小文字は区別される

console.log('JavaScript'.includes('java')); // 結果 : false

比較前に toLowerCase() や toUpperCase() でそろえると安定します。

● 文字数と見た目の1文字がズレることもある

絵文字や一部の特殊文字では、length の結果と見た目の文字数が一致しないことがあります。
これは文字列処理でよくある落とし穴なので、長さチェックでは仕様を意識することが大切です。

9. まとめ

文字列操作メソッドは、JavaScript / TypeScriptで非常によく使う基本技術です。
入力値の整形、検索、表示の加工など、さまざまな場面で登場します。

● 本記事のポイント

• length と trim() は入力チェックの基本
• slice() や substring() で一部を切り出せる
• replace() や replaceAll() で文字列を置換できる
• includes() などで文字列検索ができる
• split() や大文字小文字変換は実務でも頻出
• 文字列メソッドは元の値を変更しないことが多い

● 次への導線

文字列操作に慣れてきたら、次は次のようなテーマにも進みやすくなります。

• 正規表現 を使ったより高度な文字列チェック
• 例外処理 や デバッグ を組み合わせた安全な処理
• localStorage へ文字列データを保存する活用

文字列操作は地味に見えて、実際にはかなり実用的です。よく使うメソッドから少しずつ慣れていくと、日々のコーディングがかなり楽になります。