自己紹介
メニュー

JavaScriptの文字列の操作について

JavaScriptの文字列の操作について
公開日:2024年11月4日
最終更新日:2024年11月4日

JavaScriptでは、文字列を操作するためのメソッドが豊富に提供されています。この記事では、文字列の結合や分割、検索、置換といった基本操作から、便利なテンプレートリテラルまで、JavaScriptの文字列操作に関する重要なメソッドをサンプルコードとともに詳しく解説します。

目次

文字列の結合方法

JavaScriptでは、複数の文字列を結合するための方法がいくつかあります。以下で代表的な方法を紹介します。

プラス演算子での結合

プラス演算子を使って、2つ以上の文字列を結合することができます。

let greeting = "Hello, " + "world!";
console.log(greeting); // Hello, world!

変数を組み合わせることも可能です。

let name = "Alice";
let message = "Hello, " + name + "!";
console.log(message); // Hello, Alice!

テンプレートリテラルによる結合

テンプレートリテラルはバッククォートで囲むことで、文字列の中に変数や式を簡単に埋め込むことができます。${}の中に変数や式を入れることで、その内容を文字列の一部として出力します。

let name = "Alice";
let age = 30;
let message = `Hello, ${name}! You are ${age} years old.`;
console.log(message); // Hello, Alice! You are 30 years old.

テンプレートリテラルを使うと、文字列と変数の結合がシンプルで見やすくなります。

文字列の長さを取得する

文字列の長さ(文字数)はlengthプロパティを使って取得できます。

let str = "Hello";
console.log(str.length); // 5

文字列の検索と位置取得

JavaScriptには文字列の中で特定の文字や部分文字列を検索するためのメソッドが複数あります。

indexOf

indexOfは、指定した文字列が最初に出現する位置を返します。見つからない場合は-1を返します。

let text = "JavaScript is fun";
console.log(text.indexOf("Script")); // 4
console.log(text.indexOf("not found")); // -1

lastIndexOf

lastIndexOfは、指定した文字列が最後に出現する位置を返します。見つからない場合は-1を返します。

let text = "JavaScript is fun, JavaScript is powerful";
console.log(text.lastIndexOf("JavaScript")); // 18

includes

includesは、指定した文字列が含まれているかどうかを真偽値(trueまたはfalse)で返します。

let text = "JavaScript is fun";
console.log(text.includes("fun")); // true
console.log(text.includes("boring")); // false

文字列の抽出

文字列の一部を取り出すには、さまざまなメソッドが用意されています。

slice

sliceは、開始位置と終了位置を指定して部分文字列を抽出します。

let text = "JavaScript";
console.log(text.slice(0, 4)); // "Java"
console.log(text.slice(4)); // "Script"

substring

substringは、開始位置と終了位置を指定して部分文字列を取得しますが、負のインデックスは使用できません。

let text = "JavaScript";
console.log(text.substring(0, 4)); // "Java"
console.log(text.substring(4)); // "Script"

substr(非推奨)

substrは、開始位置と抽出する文字数を指定して部分文字列を取得します。ただし、これは非推奨であるため、できる限りsliceやsubstringを使うことが推奨されます。

let text = "JavaScript";
console.log(text.substr(4, 6)); // "Script"

文字列の置換

特定の文字や文字列を他の文字列に置き換えるには、replaceメソッドを使用します。

replace

replaceは、指定した文字列や正規表現に一致する最初の部分を置き換えます。

let text = "Hello, world!";
let newText = text.replace("world", "JavaScript");
console.log(newText); // Hello, JavaScript!

replaceAll

replaceAllは、指定した文字列や正規表現に一致するすべての部分を置き換えます。

let text = "Apples are red. Apples are sweet.";
let newText = text.replaceAll("Apples", "Oranges");
console.log(newText); // Oranges are red. Oranges are sweet.

文字列の分割

splitメソッドを使うと、文字列を指定した区切り文字で分割して配列にすることができます。

let text = "Apple, Banana, Cherry";
let fruits = text.split(", ");
console.log(fruits); // ["Apple", "Banana", "Cherry"]

文字列の変換

文字列を大文字や小文字に変換するメソッドもあります。

toUpperCase

toUpperCaseは、文字列をすべて大文字に変換します。

let text = "Hello, World!";
console.log(text.toUpperCase()); // "HELLO, WORLD!"

toLowerCase

toLowerCaseは、文字列をすべて小文字に変換します。

let text = "Hello, World!";
console.log(text.toLowerCase()); // "hello, world!"

文字列のトリミング

文字列の前後の空白を取り除くには、trimメソッドを使用します。

let text = "   Hello, World!   ";
console.log(text.trim()); // "Hello, World!"

trimStartとtrimEnd

trimStartは先頭の空白を、trimEndは末尾の空白を取り除きます。

let text = "   Hello, World!   ";
console.log(text.trimStart()); // "Hello, World!   "
console.log(text.trimEnd()); // "   Hello, World!"

文字列の繰り返し

repeatメソッドを使うと、指定した回数だけ文字列を繰り返して生成できます。

let text = "Hello ";
console.log(text.repeat(3)); // "Hello Hello Hello "

文字列の比較

JavaScriptでは、文字列同士を比較するために通常の比較演算子を使います。厳密な比較を行う場合は、等価演算子(===)や不等価演算子(!==)を使います。

let text1 = "apple";
let text2 = "banana";
console.log(text1 === text2); // false
console.log(text1 < text2); // true(アルファベット順で比較)

まとめ

JavaScriptの文字列操作には、基本的な結合や分割から高度な置換や検索、繰り返しといった多くのメソッドが用意されています。これらを理解して活用することで、文字列データを自在に操作できるようになります。プラス演算子やテンプレートリテラルを使った結合方法から始め、目的に応じたメソッドを組み合わせることで、効率的でわかりやすいコードが書けるようになるでしょう。

このページを共有
カテゴリー
新着記事

JavaScriptで日付や時間を扱う「Date」オブジェクト

JavaScriptの繰り返し処理の基本とメソッド

JavaScriptの文字列の操作について

JavaScriptにおける数値の操作に関するメソッド

JavaScriptのDateオブジェクトの基礎