テンプレートリテラル文字列操作
文字列操作の基礎
JavaScript初心者にとって、文字列操作は最初に習得すべき重要なスキルです。文字列は String 型で表され、文字列リテラルはシングルクォート(')やダブルクォート(")で囲むことで作成できます。例えば、'Hello, World!' や "JavaScript" のように書きます。
文字列の長さを取得するには length プロパティを使用します。以下の例では、文字列の長さを取得し、コンソールに出力しています。
const greeting = 'Hello, World!';
console.log(greeting.length); // 13
文字列の連結は + 演算子や concat() メソッドで行えます。連結は文字列を結合して新しい文字列を生成します。
const firstName = 'John';
const lastName = 'Doe';
const fullName = firstName + ' ' + lastName;
console.log(fullName); // John Doe
テンプレートリテラルとバッククォート
ES6から導入されたテンプレートリテラルは、バッククォート(`)で囲むことで文字列を作成します。テンプレートリテラルの最大の特徴は「変数展開」です。${...} 内に変数や式を書けば、その値が埋め込まれます。
const name = 'Alice';
const age = 30;
const message = `名前は${name}で、年齢は${age}歳です。`;
console.log(message);
// 名前はAliceで、年齢は30歳です。
テンプレートリテラルは改行をそのまま保持できるため、複数行の文字列を簡潔に書けます。
const poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.`;
console.log(poem);
検索と置換のテクニック
文字列検索には indexOf() や includes()、正規表現を使った match() などがあります。検索結果は文字列の開始位置を返すか、真偽値を返します。
const text = 'The quick brown fox jumps over the lazy dog.';
console.log(text.indexOf('fox')); // 16
console.log(text.includes('cat')); // false
文字列置換は replace() メソッドで行います。単一の置換は文字列を直接渡し、複数置換は正規表現と g フラグを使用します。
const sentence = 'I love cats. Cats are great.';
const replaced = sentence.replace(/cats/gi, 'dogs');
console.log(replaced);
// I love dogs. Dogs are great.
文字列フォーマットの実践
フォーマットは文字列を整形して表示する際に便利です。JavaScriptではテンプレートリテラルを使ったフォーマットが最もシンプルです。数値をパーセント表示したり、日付を整形したりする例を紹介します。
const percent = 0.756;
const formatted = `${(percent * 100).toFixed(1)}%`;
console.log(formatted); // 75.6%
const date = new Date();
const formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
console.log(formattedDate); // 2026-01-13
さらに、外部ライブラリを使わずに簡易的なフォーマット関数を自作することも可能です。以下はプレースホルダーを置換する小さな関数です。
function format(template, ...args) {
return template.replace(/{(\d+)}/g, (match, index) => args[index] ?? match);
}
const result = format('Hello, {0}! You have {1} new messages.', 'Bob', 5);
console.log(result); // Hello, Bob! You have 5 new messages.
コメント
コメントを投稿