1. はじめに
JavaScriptの文字列操作について、動画教材で7レッスン分まとめて学習しました。
length や slice() など名前は聞いたことがあるメソッドやプロパティでも、「実際にどう使うのか」「似たメソッドとどう違うのか」があいまいだったので、コード例を交えながら整理します。
2. 文字列の基本操作
文字列の長さを取得したり、特定の文字にアクセスする基本的な操作から確認します。
2.1 prompt() で文字列を受け取る
prompt() はブラウザ上でユーザーに入力を求めるダイアログを表示する関数です。
返り値は必ず**文字列（string型）**になるようです。
const input = prompt("名前を入力してください");
console.log(input); // 例: "Taro"
console.log(typeof input); // "string"
解説
数字を入力しても typeof は "string" になります。数値として使いたい場合は Number() で変換が必要です。
2.2 .length で文字数を取得する
.length は文字列の文字数を返すプロパティです。メソッドではないので () は不要です。
const str = "Hello";
console.log(str.length); // 5
出力結果
5
解説
"Hello" は5文字なので 5 が返ります。
2.3 [] で特定の文字にアクセスする
インデックス（添字）を使って、文字列の特定の位置の文字を取り出せます。
インデックスは 0始まり です。
const str = "Hello";
console.log(str[0]); // "H"
console.log(str[4]); // "o"
出力結果
H
o
解説
配列は [] で要素を書き換えられますが、文字列は書き換えられません。
const str = "Hello";
str[0] = "J";
console.log(str); // "Hello"（変わらない）
出力結果
Hello
文字列は**イミュータブル（変更不可）**な性質があるようです。
3. 文字列の整形
大文字・小文字の変換や空白の除去など、文字列を整える操作を整理します。
3.1 toLowerCase() / toUpperCase()
文字列をすべて小文字・大文字に変換します。
const str = "Hello World";
console.log(str.toLowerCase()); // "hello world"
console.log(str.toUpperCase()); // "HELLO WORLD"
出力結果
hello world
HELLO WORLD
解説
ユーザー入力の大文字・小文字を統一して比較したいときに便利そうです。
3.2 trim()
文字列の**先頭と末尾の空白（スペース・タブ・改行）**を除去します。
const str = " Hello ";
console.log(str.trim()); // "Hello"
出力結果
Hello
解説
prompt() などで受け取った入力に余計な空白が入っているときに役立ちます。
4. 文字列の検索・判定
特定の文字列が含まれているかどうかを調べるメソッドを整理します。
4.1 includes() / indexOf()
const str = "JavaScript is fun";
console.log(str.includes("fun")); // true
console.log(str.includes("Java")); // true
console.log(str.includes("python")); // false
console.log(str.indexOf("is")); // 11
console.log(str.indexOf("py")); // -1（見つからない場合は -1）
出力結果
true
true
false
11
-1
解説
includes() は見つかれば true、なければ false を返します。
indexOf() は最初に見つかった位置のインデックスを返し、見つからなければ -1 を返します。
4.2 startsWith()
文字列が指定した文字列で始まるかどうかを調べます。
const str = "Hello World";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World")); // false
出力結果
true
false
解説
URLが https:// で始まるか確認するような場面で使えそうです。
4.3 forEach() で複数の文字列を処理する
forEach() は配列の各要素に対して処理を繰り返すメソッドです。
文字列の配列と組み合わせて使えます。
const fruits = ["apple", "banana", "cherry"];
fruits.forEach((fruit) => {
console.log(fruit.toUpperCase());
});
出力結果
APPLE
BANANA
CHERRY
解説
各要素に対して toUpperCase() を呼び出し、大文字に変換して出力しています。
5. 文字列の切り出し
文字列の一部を取り出す方法と、よく使われる組み合わせパターンを整理します。
5.1 slice()
slice(開始インデックス, 終了インデックス) で部分文字列を切り出します。
終了インデックスの文字は含まれません。
const str = "Hello World";
console.log(str.slice(0, 5)); // "Hello"
console.log(str.slice(6)); // "World"（終了を省略すると末尾まで）
console.log(str.slice(-5)); // "World"（負の値は末尾から数える）
出力結果
Hello
World
World
5.2 indexOf() との組み合わせ
indexOf() で特定の文字の位置を取得し、slice() で切り出すパターンがよく使われるようです。
const email = "user@example.com";
const atIndex = email.indexOf("@");
console.log(email.slice(0, atIndex)); // "user"
console.log(email.slice(atIndex + 1)); // "example.com"
出力結果
user
example.com
解説
@ の位置を indexOf() で取得し、その前後を slice() で切り出しています。
5.3 substring() との違い
slice() と似たメソッドとして substring() があります。
大きな違いは負のインデックスの扱いです。
const str = "Hello";
console.log(str.slice(-3)); // "llo"（末尾から3文字）
console.log(str.substring(-3)); // "Hello"（負の値は0として扱われる）
出力結果
llo
Hello
解説
substring() は負のインデックスを 0 として扱うため、結果が変わります。基本的には slice() を使えば問題ないようです。
6. 文字列の加工・変換
文字列の内容を置き換えたり、別の形式に変換する操作を整理します。
6.1 replace() / replaceAll()
replace() は最初にマッチした箇所だけを置換します。
replaceAll() はすべてのマッチした箇所を置換します。
const str = "foo bar foo";
console.log(str.replace("foo", "baz")); // "baz bar foo"
console.log(str.replaceAll("foo", "baz")); // "baz bar baz"
出力結果
baz bar foo
baz bar baz
解説
replace() は最初の "foo" しか置き換えない点に注意が必要です。全件置換したい場合は replaceAll() を使います。
6.2 split()
文字列を指定した区切り文字で分割し、配列として返します。
const str = "apple,banana,cherry";
const arr = str.split(",");
console.log(arr); // ["apple", "banana", "cherry"]
出力結果
["apple", "banana", "cherry"]
解説
CSVのような区切り文字つきデータを扱うときに役立ちそうです。
7. 文字列の繰り返し・桁合わせ
文字列を繰り返したり、長さを揃えて整形する方法を整理します。
7.1 repeat()
文字列を指定した回数繰り返した新しい文字列を返します。
console.log("*".repeat(5)); // "*****"
console.log("ab".repeat(3)); // "ababab"
出力結果
*****
ababab
解説
数値に応じてグラフのバーを描画するような使い方ができます。
const score = 7;
console.log("█".repeat(score)); // "███████"
7.2 padStart() / padEnd()
文字列の**先頭（padStart）または末尾（padEnd）**に指定した文字を埋めて、全体の長さを揃えます。
const num = "5";
console.log(num.padStart(3, "0")); // "005"
console.log(num.padEnd(3, "0")); // "500"
出力結果
005
500
解説
数値に対して使う場合は、先に String() で文字列に変換する必要があります。
const n = 42;
console.log(String(n).padStart(5, "0")); // "00042"
出力結果
00042
7.3 テンプレートリテラルとの組み合わせ
バッククォート（`）を使ったテンプレートリテラルと組み合わせることで、表形式の出力が作りやすくなります。
const items = [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 80 },
];
items.forEach(({ name, price }) => {
const paddedName = name.padEnd(10, " ");
const paddedPrice = String(price).padStart(5, " ");
console.log(`${paddedName}${paddedPrice}円`);
});
出力結果
Apple 150円
Banana 80円
解説
padEnd() で名前の長さを揃え、padStart() で価格の桁を揃えることで、列が整った見た目になります。
まとめ
今回学んだJavaScriptの文字列メソッドを振り返ります。
| メソッド・プロパティ | 主な用途 |
|---|---|
.length |
文字数を取得 |
toLowerCase() / toUpperCase()
|
大文字・小文字変換 |
trim() |
前後の空白除去 |
includes() |
含まれるか判定 |
indexOf() |
位置を取得（なければ -1） |
startsWith() |
先頭の文字列を判定 |
slice() |
部分文字列の切り出し |
replace() / replaceAll()
|
文字列の置換 |
split() |
文字列を配列に分割 |
repeat() |
文字列の繰り返し |
padStart() / padEnd()
|
桁揃え・文字列の埋め込み |
まとめると、特に注意が必要だと感じたポイントは以下のとおりです。
- 文字列はイミュータブルなので
[]での書き換えは無効になる -
indexOf()は見つからないと-1を返す -
replace()は最初の1つだけ置換し、全置換にはreplaceAll()を使う -
slice()は負のインデックスが使えるが、substring()では0として扱われる -
padStart()/padEnd()は文字列に対して使うため、数値はString()で変換してから使う
文字列メソッドは種類が多くて最初は混乱しましたが、コードを書きながら整理するとだいぶ頭に入ってきた気がします。実際にコードを書いて使い分けを体感するのが一番の近道だと感じました。