javascript文字列の操作入門

本日はJavaScript文字列について学習します。

JavaScriptでの文字列の作成、検索、置換、それらその他の操作について初学者のうちに知っておくべき必要のあるすべてを網羅してもらう事を目的とした記事となります。

プリミティブ

JavaScriptには、基本的に2つの種類の文字列があります。

それらは文字列プリミティブと文字列オブジェクトです。

文字列プリミティブは不変であり、文字列オブジェクトは可変であることが、これらの種類の主な違いの1つです。

JavaScriptには、他にもさまざまなデータ型が存在します。

理解するためには、これらのデータ型の数を知ることが重要です。

文字列プリミティブと文字列オブジェクトの違いを理解することは、JavaScriptの開発において非常に重要です。

JavaScriptにおけるデータ型の理解は、プログラマーにとって非常に重要なスキルの1つです。

正しいデータ型を選択し、適切なメソッドを使用することで、コードの効率性と信頼性を高めることができます。

プリミティブ

JavaScriptには8つのデータ型がありますが、そのうちの1つが文字列(string)です。

文字列はプリミティブデータ型であり、他のプリミティブ型と同様に、作成された後に変更することはできません。

JavaScriptのプリミティブ型は、数値(number)、ビッグインテガー(bigint)、真偽値(boolean)、未定義(undefined)、null、シンボル(symbol)、そしてオブジェクト(object)です。

JavaScriptの非プリミティブ型には、配列や関数などがあります。

これらはオブジェクト参照とも呼ばれます。

ただし、文字列は不変であるため、文字列オブジェクトが作成されると、変更することはできません。

また、文字列は複数の文字から構成され、単一の文字には個別の型が存在しません。

プログラミングにおいて、文字列はテキストの表示と操作のための重要な概念であり、テキストはコンピューターを介した通信や理解の主な手段です。

プリミティブ型は、一度作成されると変更できないため、不変なデータ型として知られています。

これは、プリミティブ値を置き換えることはできますが、直接変更することはできないためです。

一方、可変値は作成後に変更できる値です。

JavaScriptにおける文字列は、プログラミングにおいて最も基本的な概念の1つです。

文字列でのメソッドとプロパティ

JavaScriptにおいて、プリミティブ値はオブジェクトではないため、プロパティやメソッドを持つことができません。

しかし、JavaScriptではメソッドやプロパティを実行する際にプリミティブ値を自動的にオブジェクトとして扱うため、文字列メソッドもプリミティブ値で使用可能です。

文字列メソッドは、文字列を操作するための便利な機能を提供しています。

これらのメソッドは、文字列を対象に呼び出されるため、JavaScriptは自動的にプリミティブ値をラップして対応するStringオブジェクトに変換します。

一般的によく使用される文字列オブジェクトの標準メソッドは以下の表をご確認ください。

メソッド	概要
charAt(index)	指定のインデックス文字を返す
concat()	２つ以上の文字列を結合
split()	文字列を文字列の配列として変換します
replace()	文字列を別の文字列として置き換え(置換)します
substr(start, length)	文字列の一部のみを返す
substring(start,end)	文字列の一部のみを返す
slice(start, end)	文字列の一部のみを返す
toUpperCase()	渡された文字列全てを大文字で返す
toLowerCase()	渡された文字列全てを小文字で返す
trim()	文字列から空白を削除する
include()	文字列の検索をし、ブール値として返す
search()	文字列の検索をし、一致した位置のみを返す
indexOf(string,start)	文字列の検索をし、一致した位置のみを返す

ただし、一部のメソッドは現在では推奨されておらず、将来的にブラウザでサポートされなくなる可能性があります。

例えば、boldメソッドは非公開となっており、fontcolorメソッドはHTML5で廃止されています。

以下にStringオブジェクトの標準プロパティを示します。

プロパティ	概要
length	文字列の長さ
prototype	Stringオブジェクトに新しいプロパティとメソッドを追加できます

上記のように、Stringオブジェクトには、lengthやprototypeなどの標準プロパティがあります。

これらのプロパティは文字列の長さや新しいプロパティやメソッドの追加に利用できます。

要するに、JavaScriptではプリミティブ値をオブジェクトとして扱えるため、文字列メソッドを利用することができます。

ただし、適切に使用することが重要であり、古いメソッドは推奨されていないため注意が必要です。

文字列の作成

文字列プリミティブの作成は以下のようにします。

let example1 = "Hello";

// or 

let example2 = String("Hello");

JavaScriptでは、文字列プリミティブを作成するために、シングル(一重引用符)、ダブル(二重引用符)、バッククォート(バックティック)のいずれかを使用することができます。

例えば、次のようになります。

const example1 = 'こんにちは'; //シングルクォート

const example2 = "おはよう"; //ダブルクォート

const example3 = `こんばんは`; //バッククォート

一重引用符と二重引用符はほぼ同じ機能を持ちますが、バッククォートはテンプレートリテラルと呼ばれる式を含めることができます。

これにより、文字列内で変数を使用したり、式を埋め込んだりすることができます。

文字列内で引用符を使用する場合は、異なる種類の引用符を使用するか、エスケープ文字を使用する必要があります。

const name = "私の名前は'Taro'です。"; //ダブルクォートを使用

const message = '「こんにちは」と言うと "hello" と返します。'; //シングルクォートを使用

const longMessage = `「Hello」と言うと "こんにちは" と返します。`; //バッククォートを使用

複数行の文字列を作成する場合は、文字列を連結する方法を使用するか、バックスラッシュ( \ )を使用することができます。

const message1 = "これは" +
                "複数行の" +
                "コードです。";

const message2 = "これも\n\
                  複数行の\n\
                  コードです。";

文字列と変数を組み合わせることもできます。

また、JavaScriptは自動的に異なる型の変数を文字列に変換します。

const name = "Taro";

const message = "こんにちは、" + name + "さん！";

const number = 42;

const result = "答えは" + number + "です。";

文字列を更新する場合は、文字列に追加するために += を使用できます。

let message = "Hello, ";

message += "world!";

console.log(message); // Hello, world!

オブジェクト

オブジェクトは、プリミティブとは異なり、データのコレクションとそのプロパティを格納でき、変更可能です。

Stringオブジェクトを扱う際には、オブジェクト自体に含まれる文字列を変更しないことが重要です。

そのため、StringObjectメソッドを使用する場合でも、オブジェクト自体を変更するのではなく、新しい文字列を返すことが多いです。

オブジェクト型の変数には、値が直接格納されるわけではありません。

変数を別の変数に代入する場合は、オブジェクトの参照を指定します。

変数の1つからオブジェクトを変更すると、他の変数にもこの変更が加えられます。

Stringオブジェクトのインスタンスは、他のオブジェクトインスタンスが作成されるのと同様に作成されます。

new演算子を使用してStringオブジェクトを作成することができます。

let myString = new String("これは私の文字列です")


console.log(myString)

Stringオブジェクトには多数のメソッドが用意されており、これらを使用することで文字列の操作が容易になります。

例えば、toUpperCase()メソッドを使用すると、文字列のすべての文字を大文字に変換できます。

また、toLowerCase()メソッドを使用すると、文字列のすべての文字を小文字に変換することができます。

let myString = "string";
let upperCase = myString.toUpperCase();
console.log(upperCase); // STRING

let lowerCase = "STRING".toLowerCase();
console.log(lowerCase); // string

文字列を操作する際に、JavaScriptの文字列オブジェクトには、文字列を複数の部分に分割したり、特定の文字を取り出したりするための機能があります。

その1つが、charAt()メソッドです。

このメソッドを使用すると、対象となる文字列を指定したインデックスが示す位置にある文字を取得することができます。

例えば、文字列 "Hello, World!" の場合、charAt(0) を実行すると "H"、charAt(7) を実行すると "W" を取得することができます。

以下は、文字列の特定の位置にある文字を取得するために charAt() メソッドを使用する例です。

const myString = "Hello, World!";
const firstChar = myString.charAt(0);
console.log(firstChar); // "H"

const seventhChar = myString.charAt(7);
console.log(seventhChar); // "W"

以上のように、JavaScript の文字列オブジェクトは、文字列を操作するための多数のメソッドを提供しています。

しかし、文字列オブジェクトを使用するとプログラムの速度が低下する可能性があるため、プリミティブな文字列を作成して使用することが推奨されます。

文字列の比較

JavaScriptでは、文字列を比較する方法は様々あります。

まず、厳密な等式演算子( === )を使用することで、文字列が完全に一致するかどうかを判断することができます。

例えば、次のコードでは、Helloという文字列はHelloと厳密に等しいため、trueが出力されます。

一方、welcomeという文字列は、Helloと異なるため、falseが出力されます。

const test1 = 'Hello';
const test2 = 'welcome';

console.log(test1 === 'Hello');  // true
console.log(test1 === tests2);  // false

ただし、厳密な等式演算子を使用する場合、大文字と小文字は区別されます。

つまり、JavaScriptとjavascriptは異なる文字列として扱われます。

同様に、日本語でも、ひらがなとカタカナは区別されます。

const test1 = 'javascript';// 小文字
const test2 = 'Javascript'; //大文字含む
const test3 = 'やまだたろう';// ひらがな
const test4 = 'ヤマダタロウ'; //カタカナ

console.log(test1 === test2); // false
console.log(test3 === test4); // false

大文字と小文字などの区別をしない文字列の比較を行いたい場合は、両方の文字列を小文字に変換し、後で厳密な等式演算子を使用して比較することができます。

JavaScriptでは、文字列を小文字に変換するために、toLowerCase()メソッドを使用できます。

例えば、次のコードでは、Javascriptとjavascriptは両方とも小文字に変換され、等しい文字列として扱われます。

const test1 = 'javascript';// 小文字
const test2 = 'Javascript'; //大文字含む

console.log(test1.toLowerCase() === test2.toLowerCase()); // true

また、JavaScriptでは、全ての文字列には「length」プロパティがあります。

このプロパティの値を比較することで、どちらの文字列が長いかを判断することができます。

例えば、次のコードでは、JavaScriptの長さがJavaよりも長いため、trueが出力されます。

const test1 = 'Java';

const test2 = 'JavaScript'; 

console.log(test1.length < test2.length); // true

これらの方法を活用することで、文字列を効果的に比較することができます。

パディング文字列

JavaScriptには、文字列を指定した長さにパディング（埋める）するための便利なメソッドがあります。

それらはpadStart()とpadEnd()と呼ばれます。

padStart()メソッドは、文字列の先頭に空白を追加して、指定された長さに達するようにします。

一方、padEnd()メソッドは、文字列の末尾に空白を追加して、同じように指定された長さに達するようにします。

例えば、以下のように使うことができます。

console.log("Hello".padStart(8)); // "    Hello"
console.log("Hello".padEnd(8));   // "Hello   "

また、空白以外の文字列で埋めることもできます。

その場合、2番目の引数として埋める文字列を指定します。

指定した文字列は、必要なパディングに均等に分配されます。

文字列が指定された長さに達しなかった場合、不足部分は繰り返し埋める文字列で埋められます。

以下は、文字列を別の文字列でパディングする例です。

console.log("で決済".padStart(9, "Pay")); // "PayPayで決済"
console.log("で決済".padStart(6, "Pay")); // "Payで決済"

これらのメソッドは、最新のブラウザーでサポートされています。

以上のように、JavaScriptのpadStart()とpadEnd()メソッドは、文字列を指定した長さにパディングするための簡単な方法を提供します。

必要に応じて、空白以外の文字列でパディングすることもできます。

この機能は、文字列を整形するために非常に便利であり、Webアプリケーション開発などで広く使用されています。

文字列内の検索

JavaScriptには、文字列内で特定の文字列を検索するための便利なメソッドが複数あります。

これらのメソッドを上手に使うことで、文字列内の特定の単語やパターンを効率的に見つけることができます。

最も基本的なメソッドとして、文字列内で指定された文字列が最初に現れる位置を返す「indexOf()」メソッドがあります。

このメソッドは、文字列が見つかった場合はその文字列の最初のインデックスを、見つからなかった場合は-1を返します。

例えば、「"JavaScriptを学ぶ"」という文字列内で「"学ぶ"」が最初に現れる位置を調べたい場合は、次のように書くことができます。

console.log("JavaScriptを学ぶ".indexOf("学ぶ")); // 10が出力される

また、同じような機能を持つ「search()」メソッドもあります。

このメソッドは、「indexOf()」と同じように文字列内で指定された文字列が最初に現れる位置を返しますが、正規表現を使って検索することができる点が異なります。

次に、ES6で追加された「startsWith()」と「endsWith()」メソッドについて説明します。

これらのメソッドは、文字列が指定された文字列で始まるか、または指定された文字列で終わるかどうかを判定するために使われます。

これらのメソッドは、文字列が指定された文字列で始まる場合には「true」を、指定された文字列で始まらない場合には「false」を返します。

たとえば、「"Hello World"」という文字列が「"Hello"」で始まっているかどうかを判定するには、「startsWith()」メソッドを使うことができます。

console.log("Hello World".startsWith("Hello")); // trueが出力される

同様に、文字列が指定された文字列で終わっているかどうかを判定するには、「endsWith()」メソッドを使うことができます。

console.log("Hello World".endsWith("World")); // trueが出力される

他の例も以下に示しておきます。

console.log("taro yamada".startsWith("taro"))

// 出力 true

console.log("taro yamada".startsWith("yamada"))
// 出力 false

console.log("taro yamada".endsWith("yamada"))

//出力　true

console.log("taro yamada".endsWith("taro"))

//出力 false

これらのメソッドを使うことで、文字列内での特定の単語やパターンの検索が簡単に行えます。

文字列内の文字を置換する

JavaScriptには文字列内の特定のテキストを置き換えるために「replace()」というメソッドがあります。

このメソッドには、検索する文字列と置換する文字列の2つの引数があります。

例えば、「Are you a user?: no」という文字列の「no」を「yes」に置換したい場合、以下のようにコードを記述します。

console.log("Are you a user?: no".replace("no", "yes"));
// 出力: "Are you a user?: yes"

また、ES2021からは「replaceAll()」メソッドが追加され、文字列内のすべてのインスタンスを簡単に置き換えることができます。

以下は、「no」を「yes」に置換する例です。

let user = "Are you a user?: no! no! no!";
console.log(user.replaceAll("no", "yes"));
// 出力: "Are you a user?: yes! yes! yes!"

このように、「replace()」メソッドと「replaceAll()」メソッドを利用することで、JavaScriptで文字列の置換を簡単に実装することができます。

文字列の分割(配列に変換)

JavaScriptにおいて、文字列を配列に分割することができます。

このために使用するのが、「split()」メソッドです。

例えば、文字列をスペースで分割することによって、文章を単語の配列に変換することができます。

以下はその例です。

console.log("Apple Lemon Banana".split(" "))

 /* 
[
"Apple",
"Lemon",
"Banana"
]
 */

また、「split()」メソッドの第二引数を指定することで、分割するアイテムの数を制限することもできます。

以下はその例です。

console.log("Apple Lemon Banana".split(" ", 2))
/* 
[
"Apple",
"Lemon"
]
 */

以上のように、JavaScriptにおいて文字列を配列に分割することができます。

「split()」メソッドを使いこなすことで、より効率的なコーディングが可能になります。

長い文字列と改行

JavaScriptにおいて、文字列内に改行を挿入したい場合、エスケープ文字である\nを使用します。

ただし、エスケープ文字はクォート外で使用すると機能しないため、文字列内で直接\nを書き込む必要があります。

例えば、以下のように長い文字列を改行にしたい場合は、\nを使用します。

const myString = "この長い文字列を\n改行にしたい場合は\nエスケープ文字を使用して改行します。";

console.log(myString)

このようにすることで、次のように文字列が改行されます。

この長い文字列を
改行にしたい場合は
エスケープ文字を使用して改行します。

ただし、長い文字列を1行に書き込むとすぐに読みにくくなり、操作が困難になる場合があります。

この場合、文字列を複数行に分割して表示することができます。

以下のように、連結演算子を使用して文字列を複数行にすることができます。

const myString = "この長い文字列を\n" +
                 "連結演算子を使用して\n" +
                 "複数行にすることが可能です。";
console.log(myString);

しかしこの方法は、一部のブラウザで問題が発生する可能性があるため、推奨されません。

代わりに、テンプレートリテラル文字列を使用することをお勧めします。

テンプレートリテラル文字列を使用すると、文字列内に変数を埋め込んだり、複数行の文字列を簡単に表現することができます。

以下の例では、テンプレートリテラル文字列を使用して同じ文字列を書き直しています。

const myString = `この長い文字列を
テンプレートリテラル文字列を使用して
複数行にすることが可能です。`;
console.log(myString);

この方法を使用すると、文字列内に変数を簡単に埋め込むことができます。

例えば、以下のように変数を埋め込むことができます。

const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting);

このようにすることで、nameの値に応じて、greetingの値が変化します。

逆に改行を回避したい、その場合は行の最後にバックスラッシュ( \ )を追加することで改行を回避できます。

const myString = `この長い文字列を
バックスラッシュを使用し\
改行を回避します。`;
console.log(myString);

このようにすることで、次のように改行が回避されます。

この長い文字列を
バックスラッシュを使用し改行を回避します。

特殊文字

JavaScriptには、特殊文字を使用することができます。

これらの文字は、4〜6桁の16進数で表されたUnicode文字であり、UTF-16で複数のUnicode文字を使用することができます。

例えば、以下のコードでは、"\u00A9"は著作権記号を表し、"\u{1F60D}"は笑顔の絵文字を表し、"\u{1F34E}"はリンゴの絵文字を表します。

let arr = ["\u00A9", "\u{1F60D}",  "\u{1F34E}"]

console.log(arr)

// 出力 © 😍 🍎

このように、特殊文字を使用することで、Unicodeのさまざまな文字や絵文字を表現することができます。

しかし、まれに特殊文字や絵文字は、4バイトを使用する2つのUnicode記号でエンコードされます。その場合は、"\u{X...XXXXXX}"のように長いコードで埋め込む必要があります。

Unicodeの知識を深めたい場合は、以下のUnicode正規化フォームドキュメントを参照することをお勧めします。

UAX #15: Unicode Normalization Forms

テンプレートリテラル

以前は、文字列の連結には加算演算子の「+」を使用して、変数と文字列、または文字列同士を連結していました。

しかし、テンプレートリテラルを使用すると、文字列内に変数や式を簡単に含めることができます。

この方法では、${...}構文を使用して文字列を作成します。

これは文字列リテラルではなく、式として解析されます。

個別の文字列を一緒に追加しなくても、動的に文字列を作成できるため、文字列の補間はスマートな方法となっています。

例えば、次のように変数を使用した場合です。

const name = 'Taro';
console.log(`Hello ${name}`); 
// Hello Taro

${...}は文字列を保持する変数であり、値の追加の際に必ずしもテンプレートリテラルの変数とは限らず、単なる文字列である可能性もあります。

以下の例を参考にしてください.

console.log(`Hello ${taro}`); 
// テンプレートリテラル変数

console.log(`Hello ${'taro'}`); 
// テンプレートリテラル文字列

これらは同じように出力されます。

テンプレートリテラルを使用する場合は、文字列を含む変数だけでなく、あらゆる種類の表現を評価するため、よく確認するように注意してください。

タグ付きテンプレートリテラル

テンプレートリテラルの機能は、タグ付きテンプレートリテラルを作成する機能です。

これにより、文字列に対してカスタム処理を実行できます。 ] この機能を使うには、関数を作成する必要があります。

関数は、通常の関数と同じように見えますが、呼び出し方が異なります。

テンプレートタグを使用して、関数の名前をテンプレートリテラルの前に配置します。

たとえば、次のようにテンプレートタグを使用して関数を呼び出すことができます。

function sample() {
    // 何かしらの処理
}

sample`私の名前は ${name} 年齢は${age} ;

タグ付きテンプレートの文字列の配列を取得するには、次のようにします。

const tagSample = strings => {
    return strings;
}

const result = tagSample`Hello`;

console.log(result); // 出力: ["Hello"]

タグ付きテンプレートでは、複数の引数を渡すことができます。

タグ付きテンプレートは関数のように見えますが、呼び出し時には括弧を使用しません。

この機能は非常に強力であり、データを取得して任意の操作を行うことができます。

HTMLテンプレートリテラル

テンプレートリテラルは、HTMLを作成するのに最適な方法です。

改行を追加したり、動的クラスを使用したりすることができます。

以下は、HTMLとJavaScriptのサンプルコードです。

<body>
<h1>JavaScript HTML Template</h1>

<p id="root"></p>

</body>

let main = "テンプレートリテラル";
let myTags = ["文字列内の変数を使用可能", "InternetExplorerではサポートされていません", "テンプレートリテラルはES6の機能"];

let htmlSample = `<h2>${main}</h2><ul>`;

const list = () => {

for(const x of myTags) {
htmlSample += `<li>${x}</li>`;
}
htmlSample += `</ul>`;

document.getElementById("root").innerHTML = htmlSample;
}

list() //実行