deve.K

エンジニアが未来を切り開く。

トップ > JavaScript基礎 > 最新のJavaScriptでの文字列 — テキストの操作

最新のJavaScriptでの文字列 — テキストの操作

JavaScript基礎

javascript文字列の操作 入門

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

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

JavaScriptでは基本的に2つのカテゴリの文字列があり分類されます。

・文字列プリミティブ

・文字列オブジェクト

これら両方のタイプの主な違いの1つがございます。

プリミティブタイプは不変であり、オブジェクトタイプは可変となります。

文字列プリミティブ

文字列(string)は、JavaScriptの8つのデータ型の１つであるプリミティブデータ型であり、そして文字列は不変であることに注意してください。

8つのうちの7つはプリミティブ型と呼ばれています

それ以外の他の全てはオブジェクトとなる。

  1. string

  2. number

  3. bigint

  4. boolean

  5. undefined

  6. null

  7. symbol

  8. Object

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

また単一の文字に個別のタイプはございません。

文字列はテキストの表示と操作の方法であり、テキストはコンピューターを介した通信と理解の主な方法であるため、文字列はプログラミングの最も基本的な概念の1つです。

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

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

ただし、JavaScriptではメソッドとプロパティを実行するときにJavaScriptがプリミティブ値をオブジェクトとして扱うため、メソッドとプロパティもプリミティブ値で使用が可能です。

文字列メソッドは、文字列を操作するのに役立ちます。

メソッドが呼び出されると、JavaScriptはプリミティブを対応するオブジェクトに自動的に変換をしJSはプリミティブをラップして、メソッドを呼び出します。

つまり文字列メソッドはすべて、プリミティブではなくStringオブジェクトの一部となります。

下記の表に一般的によく使用される文字列オブジェクトの標準メソッドをご紹介しておきます。

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

stringオブジェクトメソッドでは機能によっては、現在ではウェブ標準から削除され推奨されていないメソッドもございます。

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

それらは使用可能ではあるが、将来的にブラウザでサポートされなくなる可能性も十分にありえます。

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

文字列の作成

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

let example1 = "Hello";

// or 

let example2 = String("Hello");

文字列プリミティブを定義する際は、3つの方法があります。

シングル(一重引用符)またはダブル(二重引用符)クォート、バックティックまたは(バッククォートと呼ぶ)のいずれかを使用します。

const example1 = 'Hello'; //シングル

const example2 = "Welcome";//ダブル

const example3 = ` ${example1} and ${example2}`; //バッククォート

一重引用符と二重引用符は基本的には実質同じであり、どちらも使用できます。

バッククォートはテンプレートリテラル(テンプレート文字列)の式になります、こちらは後に解説致します。

文字列を扱う際、引用符の中に別の引用符を扱う事が可能となります。

const name = 'My name is "Taro".';

注意点は同じ引用符を一致させて扱う事はできません

const name = 'My name is 'Taro'.';

//error

複数行の文字列を扱う際は、+演算子または他の演算子 バックスラッシュ\を使用します。

// +演算子

const message = '複数行の長いメッセージに' + '+演算子を使用した' + 'コードです。';

//  バックスラッシュ \を使用

const message2 = '複数行の長いメッセージに\バックスラッシュ使用した\コードです。'

文字列を変数と連結することもできます、また文字列以外の変数は文字列に変換されます。

let message = "変数を連結する";

let myString = "文字列と" + message;

console.log(myString);
// 文字列と変数を連結する


let num = 2; //数値

let weather = "最高気温は今日より" + num + "℃ほど高いです。";
//変数numは文字列に変換される

console.log(weather)

既存の文字列の末尾に追加して新しい文字列を作成する際は+=を使用します。

let myString = "User: ";

myString += "Taro Ymada,";

myString += "Hanako Yamada";

console.log(myString);

オブジェクト

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

StringObjectメソッドはオブジェクト自体に含まれる文字列を変更しないことを理解することが重要となります。

オブジェクトタイプでは変数自体には値がありません。

変数を別の変数に割り当てる(代入)ときは、オブジェクトの参照を指定します。

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

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

オブジェクトは引数として渡されるプロパティとして使用される文字列を含む、new演算子を使用しStringオブジェクトを作成できます。

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


console.log(myString)

Stringオブジェクトクラスに組み込まれているメソッドを使用する場合

let myString = new String("string")


let upperCase = myString.toUpperCase();


console.log(upperCase); //STRING

toUpperCase()メソッドはすべての文字が大文字に変換された文字列を返します。

.toLowerCase()で小文字にする事も可能です。

"STRING".toLowerCase() // "string"

文字列を操作する機能におけるJavaScript文字列オブジェクトの最も強力な機能の1つは、文字列を複数に分割し文字列の1文字部分を取り出し、それが含まれているか確認が可能です。

それを可能にするには『.charAt()』メソッドを使用します。

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

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

let thirdChar = myString.charAt(3)

console.log(thirdChar); 
// 出力 『私』インデックス番号3が出力

ですがnewを使用したStringオブジェクト方法はあまり役に立つ場合がなく、ほとんどでは文字列プリミティブを作成して使用します。

それは文字列オブジェクトを使用すると、プログラムの速度が低下する可能性がある為です。

文字列の比較

文字列が等しいかどうかを判断するには、厳密な等式演算子( === )を使用できます。

文字列が異なる場合は『false』が返され、一致する場合は『true』が返されます。

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

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

厳密な等式を使用して文字列を比較する際に、常に文字の大文字と小文字が分析されます。

つまり、大文字は小さい文字とは異なる事になります。

const test1 = 'javascript';// 小文字

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

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

日本語の場合

const test1 = 'やまだたろう';// ひらがな

const test2 = 'ヤマダタロウ'; //カタカナ

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

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

前述で解説したtoLowerCase()メソッドを活用します。

const test1 = 'javascript';// 小文字

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

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

JavaScriptでは全ての文字列には『length』プロパティがあります。

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

const test1 = 'Java';

const test2 = 'JavaScript'; 

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

パディング文字列

指定された長さに達するまで文字列の先頭または末尾に空白を追加する事が可能です。

・padStart()

・padEnd()

これらメソッドを使用します。

console.log( "Hello".padStart(8));
// "    Hello" 先頭に空白

console.log("Hello".padEnd(8))
 // "hello   " 末尾に空白

空白の代わりに、2番目のパラメーターとして渡すことにより、文字列を別の文字列で埋めることができます。

その文字列は、長さに達するまで繰り返されます。

必要なパディングに均等に収まらなかった場合に関しては、文字列は切り捨てられます。

console.log("で決済".padStart(9, "Pay"))

// 出力PayPayで決済 文字列の長さは9

console.log("で決済".padStart(6, "Pay"))

// 切り捨てられてPayで決済

これは、最新のすべてのブラウザでサポートされております。

文字列内の検索

まずは文字列内の語の位置が返されるメソッドです。

つまりこのメソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の字をインデックス番号で返します。

『indexOf()』を使用します。

console.log("文字列内の語を検索".indexOf("を"))

// 出力 6

文字列が見つからない場合は-1と出力されます。

console.log("文字列内の語を検索".indexOf("あ"))

// 出力 -1

上記とまったく同じように機能する、『search()』メソッドもございます。

ES6はこれに特定のメソッドを追加しました。

・.startsWith()

・.endsWith()

これらメソッドは文字列が検索語で始まるか、検索語で終わるかを確認できます。

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

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

文字列内の特定のテキストを置き換えるために使用できるメソッドがございます。

『replace()』メソッドです。

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

//出力 Are you a user?: yes

let user = "Are you a user?: no"

console.log(user) //Are you a user?: no


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

replace()は上記の通り引数は２つのパラメータがあります。

最初の引数は文字列を検索します。

2つ目の引数はその検索した文字列を置換します。

ES2021が追加された事によりreplaceAll()メソッドで用語のすべてのインスタンスを簡単に置き換えることができるようになりました。

let user = "Are you a user?: no! no! no!"

console.log(user)

// Are you a user?: no! no! no!

console.log(user.replaceAll("no", "yes"))

// Are you a user?: yes! yes! yes!

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

文字列を配列として分割が可能です。

それを行うには、『split()』メソッドを使用します。

文字列をスペースで分割することにより、文字列の文を単語の配列として変換します。

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

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

またsplit()メソッドの2番目のパラメーターを渡すことによって、元に戻すアイテムの数を制限することも可能となります。

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

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

長い文字列と改行

文字列に改行を入れたい場合があります。

エスケープ文字である\nを使用します。

エスケープ文字はクォート外で使用すると、機能しません。

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

console.log(myString)

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

非常に長い文字列を1行に書き込むと、すぐに読みにくくなり操作が非常に難しくなります。

連結演算子を使用して、文字列を複数行に表示できます。

const myString = "この長い文字列を\n" + "連携演算子を使用して\n" + "複数行にする事が可能です。";

console.log(myString);

しかしこの方法は、一部のブラウザなどで問題が発生する可能性があるため、お勧めは致しません。

その代わりにテンプレートリテラル文字列を使用します。

特殊文字

あまり一般的ではありませんが、特殊文字も可能です

4〜6桁の16進数が表すUnicode文字となります。

UTF-16では複数のUnicode文字を使用できます。

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

console.log(arr)

// 出力 © 😍 🍎

一部のまれな文字や絵文字などは4バイトを使用する2つのUnicode記号でエンコードされます。

その場合は\u{X…XXXXXX}のように長いコードで埋め込む事ができます。

Unicodeの知識を深めたい方はこちらの、Unicode正規化フォームドキュメントを参照して下さい。

UAX #15: Unicode Normalization Forms

テンプレートリテラル(文字列リテラル)

テンプレートリテラルを使用すれば、前述のような改行を含む長い文字列を連結したりエスケープしたりする必要がなくなり、文字列と改行は保持されます。

以前では文字列にシングル『 ' ' ;』またはダブル『 " " ;』クォートを使用し文字列を囲っていました。

テンプレートリテラルでは、バッククォート『 ``; 』で囲ってあげます。

const myString = `この長い文字列を
テンプレートリテラルを使用し
改行すると保持されます。`;


console.log(myString)

Enterで改行は常に保持されます。

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

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


console.log(myString);

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

文字列の連結は以前では、連結演算子である加算『+』を使用し変数と文字列または文字列同士を連結してきました。

テンプレートリテラルを使用すると、文字列内に変数と式を含めるのが少し簡単になります。

その方法は${...}構文を使用します。

これは文字列リテラルではなく式として解析され、個別の文字列を一緒に追加しなくても動的に文字列を作成できる為、文字列の補間はスマートな文字列となっております。

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に最も最適となっています。

<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() //実行

『for..of』は文字を反復処理する事ができます。

特にReact.jsではよくテンプレートリテラルでループ処理を活用します。

上記ではfor文ですが、Reactではmap構文を使用します。

JavaScript入門 最新 関連記事

dev-k.hatenablog.com

dev-k.hatenablog.com

以上で文字列リテラル・オブジェクトの作成と表示、比較、テンプレートリテラルの作成、エスケープ、変数への文字列値の割り当てなど、JavaScriptでの文字列の操作の基本については本日は以上となります。

当記事でJavascriptのデータ型について少し理解し、それらの主な違いを学ぶことができれば幸いでございます。

最後まで読んで頂きありがとうございます。

プライバシーポリシー