先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字を扱うときってどんな型を使うんですか？」

先生

「JavaScriptでは文字を扱うときにString型を使います。簡単に言うと文字の集まりや文章を扱う箱のようなものです。」

生徒

「String型の使い方ってどんな感じですか？どうやって文字を操作するんですか？」

先生

「それでは、基本から便利な操作方法まで一緒に見ていきましょう！」

1. String型とは？

JavaScriptのString型は、文字や文章を表すデータの種類です。英語や日本語、数字や記号など、いろんな文字の集まりを扱えます。

文字列はシングルクォート（'）やダブルクォート（"）、バッククォート（`）で囲んで書きます。


let name = 'たろう';
let greeting = "こんにちは";
let message = `今日はいい天気ですね`;

どれも文字列として使えます。

2. 文字列の結合（くっつける）

複数の文字列をつなげたいときは「+」を使います。例えば、


let firstName = '山田';
let lastName = '太郎';
let fullName = firstName + lastName;

console.log(fullName); // 山田太郎

間にスペースを入れたい場合は、


let fullName = firstName + ' ' + lastName;
console.log(fullName); // 山田 太郎

このように書きます。

3. テンプレートリテラルで簡単に文字列を組み立てる

バッククォート（`）を使った書き方を「テンプレートリテラル」と呼びます。変数を${}で囲んで簡単に文字列の中に入れられます。


let age = 20;
let message = `私の名前は${fullName}で、年齢は${age}歳です。`;

console.log(message); // 私の名前は山田 太郎で、年齢は20歳です。

これはとても便利で読みやすい書き方です。

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

文字列の長さ（文字の数）を調べるにはlengthプロパティを使います。


let text = 'こんにちは';
console.log(text.length); // 5

日本語でも英語でも、スペースや記号も1文字として数えます。

5. 文字列の一部を取り出す方法

文字列の一部分だけを取り出したいときはsubstringメソッドやsliceメソッドを使います。


// substringの例
let str = 'JavaScript';
console.log(str.substring(0,4)); // Java

// sliceの例
console.log(str.slice(4)); // Script

substring(開始位置, 終了位置)で文字を取り出します。終了位置の文字は含まれません。

slice(開始位置, 終了位置)も似ていますが、負の数を使うと後ろから数えられます。

6. 文字列の検索

文字列の中に特定の文字や言葉があるか調べたいときは、indexOfメソッドを使います。見つからないときは-1が返ります。


let sentence = '今日はいい天気ですね';
console.log(sentence.indexOf('いい')); // 2
console.log(sentence.indexOf('雨'));   // -1

このように使います。

7. 文字列の大文字・小文字変換

英語の文字を大文字や小文字に変換するにはtoUpperCase()やtoLowerCase()メソッドを使います。


let lang = 'JavaScript';
console.log(lang.toUpperCase()); // JAVASCRIPT
console.log(lang.toLowerCase()); // javascript

日本語には影響しませんが、英語を扱うときに便利です。

8. 文字列の置換（変えたいとき）

文字列の一部分を別の文字列に変えたいときはreplaceメソッドを使います。


let msg = '今日はいい天気です。';
let newMsg = msg.replace('いい', 'すごくいい');
console.log(newMsg); // 今日はすごくいい天気です。

このメソッドは最初に見つかった部分だけ置き換えます。全部置き換えたいときは正規表現が必要ですが、今回はここまでにしましょう。

9. 文字列を分割する

文字列を特定の区切りで分割して配列に変えるにはsplitメソッドを使います。


let fruits = 'りんご,みかん,バナナ';
let fruitArray = fruits.split(',');
console.log(fruitArray); // ['りんご', 'みかん', 'バナナ']

このように区切り文字を指定して使います。

10. 文字列の反復（繰り返し）

文字列を何回も繰り返したいときはrepeatメソッドを使います。


let laugh = 'あはは';
console.log(laugh.repeat(3)); // あははあははあはは

11. 文字列の扱いで知っておきたいこと

JavaScriptの文字列は不変（ふへん）で、一度作った文字列は直接変えられません。変更したいときは新しい文字列を作ります。
日本語や特殊文字も扱えますが、絵文字や複雑な文字は文字数の数え方が変わることがあります。
文字列の操作は日常的に使う基本スキルなので、いろいろ試してみましょう。

まとめ

JavaScriptの文字列操作は、日常的なプログラム作成のなかでも特に使用頻度が高く、基本的な構文やメソッドをしっかり理解しておくことで、多くの場面で迷わずに処理を書けるようになります。文字列は一見単純なようでいて、日本語や英語、記号や数字が混ざることで思わぬ動きをすることもあり、基礎的な性質を丁寧に押さえておくことが大切です。この記事で触れたように、文字列の結合や長さの確認、検索、置換、分割、繰り返しなど、どの操作も実際の開発場面で頻繁に登場しますし、特にフォーム入力のチェックやメッセージの組み立てなどでも役に立ちます。また、文字列が不変であるという性質は初心者がつまずきやすい部分で、実際にコードを書いて動かしながら理解すると定着しやすくなります。ここでは改めて、実践で役に立つ文字列操作の要点を振り返りつつ、よくある場面で使える簡単なサンプルコードもまとめておきます。

文字列の組み立て方を振り返ろう

ふだん文章を扱うとき、複数の言葉をつなげたり、数字や変数を混ぜたりする場面は多くあります。そんなときに便利なのがテンプレートリテラルで、バッククォートを使うことで読みやすく整理されたコードを書くことができます。また、「+」を使った結合も基本として知っておきたい書き方で、簡単な文の連結には便利です。どちらの書き方も自然に使い分けられるようになると、文章生成がぐっと楽になります。

    
let name = 'ゆき';
let hobby = 'プログラミング';
let text = `${name}さんの趣味は${hobby}です。`;
console.log(text);

部分抽出や検索で文章を自在に扱う

長い文章の中から必要な部分を抜き出したり、特定の語句が含まれているか調べたりするのは、文字列操作の定番です。substringやsliceを使えば位置を指定して切り出すことができ、indexOfを使えば検索も簡単にできます。調べ物のように文章の一部を探したいときには、この仕組みが非常に役に立つでしょう。負の値を扱えるsliceの特徴も覚えておくと表現の幅が広がります。

    
let sentence = 'わたしはJavaScriptが大好きです';
console.log(sentence.slice(3)); 
console.log(sentence.indexOf('大好き'));

整形や置換で文章を自然な形に整える

実際のアプリケーションでは、ユーザーに見せる文章を加工する場面がよくあります。特定の語句を別の言葉に変えたり、大小の表記を揃えたりすることで、読みやすく整った文章になります。replaceやtoUpperCase、toLowerCaseなどのメソッドを組み合わせれば、簡単に文字列の表現を整えることができます。複数の箇所を変えたい場合には正規表現を使う方法もありますが、基本のreplaceだけでも十分に役立つ場面は多いです。

    
let weather = '今日はいい天気です';
let result = weather.replace('いい', 'とてもいい');
console.log(result);

分割や反復で文章を別の形に変換する

splitを使うと文章を区切りごとに配列へ変換でき、repeatを使うと文字列を繰り返し生成できます。特にsplitはデータの整形やリスト表示に欠かせない機能で、さまざまな処理に応用できます。文章の構造を意識しながら操作することで、配列と文字列の扱いがスムーズにつながり、より柔軟なプログラムを書けるようになります。

    
let words = '赤,青,緑';
let list = words.split(',');
console.log(list);

実践で知っておきたい文字列操作の注意点

JavaScriptの文字列は不変であるため、直接書き換えられないという性質があります。そのため、変更したいときには新しい文字列を作り直す必要があります。また、日本語や絵文字を扱うときは、文字数が実際の見た目と一致しないことがあり、lengthでは意図した通りに数えられない場合もあります。それでも、文字列のメソッドを理解しておけば多くの状況で柔軟に対応できるようになり、文章をベースにした処理が快適になります。

先生と生徒の振り返り会話

生徒

「きょうの内容で、文字列ってただの文章じゃなくていろんな操作ができるってわかりました。部分を切り出したり、結合したり、置換したり、思っていたより便利ですね。」

先生

「そうですね。文字列操作は基本だけど奥が深く、実際の開発でも頻繁に使われます。とくにテンプレートリテラルは読みやすくて便利なので、どんどん使っていくとよいですよ。」

生徒

「replaceやsplitなんかも使いこなせると文章処理がぐっと楽になりそうです。文章を扱う機会は多いので、練習して自然に書けるようになりたいです。」

先生

「その調子です。まずは実際に手を動かしてみて、どんなときにどのメソッドが使えるか体で覚えていきましょう。」