JavaScript Stringオブジェクト

— y2sunlight 2021-07-26

Stringオブジェクトは文字列型( string )を扱うためのラッパーオブジェクトです。

本章では、文字列の操作の種類毎に主メソッドの例を示します。文字列の操作には以下の様なものがあります。

基本操作
検索
分解
合成
正規表現
コード変換

String()関数

Stringオブジェクトはコンストラクタによって以下の様に生成されます。

let string= new String(1);
console.log(typeof(string)); // object

このコンストラクタは Stringオブジェクトを返しますが、あまり使用されることはなく、String() 関数の方が良く使用されます。

let string= String(1);
console.log(typeof(string)); // string

両者の違いは、Stringオブジェクトを返すか、基本データ型( string )を返すかの違いであり、厳密には異なりますが、実務上それは意識する必要がほとんどありません。

文字コード

JavaScriptの文字列型( string )は、文字コードとしてUTF-16を採用しています。クライアントサイドでの通常の文字列操作では文字コードを意識せずに使用できますが、クライアントサイドでAPIを使用したり、サーバサイドでファイルアクセスしたりする場合には、UTF-16を意識しないといけない場面があります。このような場合は、UTF-16との変換メソッド（ fromCharCode() と fromCodePoint() ）を使用して下さい。

UTF-16

UTF-16とは、2バイトで表現できる文字はそのまま2バイトで表現し、それ以外の文字は4バイトで表現したコードです。

日本語の場合、UTF-8とは異なり英数は2バイトで表現されますが、漢字も2バイトで表現できます。従って、漢字の割合が多い場合はUTF-16の方が効率が良いコードになっています。

静的メソッド

以下に主な Stringオブジェクトの静的メソッドの使用例を示します。詳しくはMDNをご覧下さい。

fromCharCode()

String.fromCharCode(num1[, ...[, numN]])

文字コード(UTF-16)の値を引数の列に指定し、文字列を生成します。

let s = String.fromCharCode(0x48, 0x65, 0x6c, 0x6c, 0x6f);
console.log(s);  // Hello

英数字は上例の様に、見た目はUTF-8と同じですが、実際には2バイトの数字になっています。以下は漢字の場合の例です。

let s = String.fromCharCode(0x3053, 0x3093, 0x306b, 0x3061, 0x306f);
console.log(s);  // こんにちは

fromCodePoint()

Unicodeの符号位置（コードポイント）とは文字集合内の文字の位置を表し、0 以上の整数値が割り付けられています。コードポイントを表現する時、U+ の後に16進で整数値を表記します。例えば「語」の場合、U+8A9E になります。

コードポイントの一覧はこちらを参照して下さい。

Unicodeポイントの符号化方式としては、UTF-8、UTF-16、UTF-32などがあります。

JavaScriptではUTF-16が採用されています。

UTF-32では、符号とコードポイントが同じ値になりますが、それ以外は複雑なルールでコードポイントから符号が決定されます。

console.log(String.fromCodePoint(0x8A9E));  // 語

raw()

生のテンプレート文字列から生成した文字列を返します。詳しくはMDNをご覧下さい。

インスタンスプロパティ

以下に主な Stringオブジェクトのインスタンスプロパティの使用例を示します。詳しくはMDNをご覧下さい。

length

文字列の length を反映します。読み取り専用です。

let str = "こんにちは。佐藤さん。";
console.log(str.length);  // 11

インスタンスメソッド

以下に主な Stringオブジェクトのインスタンスメソッドの使用例を示します。詳しくはMDNをご覧下さい。

基本操作

toString()

str.toString()

指定されたオブジェクトの文字列を返します。Object.prototype.toString() メソッドを上書きします。詳しくはMDNをご覧下さい。

let str = "こんにちは";
console.log(str.toString());  // こんにちは

valueOf()

str.valueOf()

指定されたオブジェクトのプリミティブ値(string型の値)を返します。 Object.prototype.valueOf() メソッドを上書きします。詳しくはMDNをご覧下さい。

let str = "こんにちは";
console.log(str.valueOf());  // こんにちは

toLowerCase()

str.toLowerCase()

小文字に変換された文字列を返します。詳しくはMDNをご覧下さい。

let str = "HELLO, SATO.";
console.log(str.toLowerCase());  // hello, sato.

toUpperCase()

str.toUpperCase()

大文字に変換された文字列を返します。詳しくはMDNをご覧下さい。

let str = "hello, sato.";
console.log(str.toLowerCase());  // HELLO, SATO.

localeCompare()

referenceStr.localeCompare(compareString[, locales[, options]])

referenceStr と compareString を比較し、referenceStr の方が小さい場合は負数(-1)を、同じ場合は0を、大きい場合は正値を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.localeCompare('こんばんは')); // -1 "こんにちは"<"こんばんは"

trim()

str.trim()

文字列の先頭と末尾にある空白を削除します。詳しくはMDNをご覧下さい。

let str = " こんにちは ";
console.log(str.trim());  // "こんにちは"

trimStart()

str.trimStart()

文字列の先頭にある空白を削除します。詳しくはMDNをご覧下さい。

let str = " こんにちは ";
console.log(str.trimStart());  // "こんにちは "

trimEnd()

str.trimEnd()

文字列の末尾にある空白を削除します。詳しくはMDNをご覧下さい。

let str = " こんにちは ";
console.log(str.trimEnd());  // " こんにちは"

検索

includes()

str.includes(searchString[, position])

文字列中に searchString が含まれているかを返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.includes('佐藤'));  // true

indexOf()

str.indexOf(searchValue [, fromIndex])

呼び出す String オブジェクト中で、 searchValue が最初に現れる位置を返します。見つからなかった場合は -1 を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.indexOf('佐藤'));  // 6

lastIndexOf()

lastIndexOf(searchValue)
lastIndexOf(searchValue, fromIndex)

呼び出す String オブジェクト中で、 searchValue が最後に現れる位置を返します。見つからない場合は -1 を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.lastIndexOf('佐藤'));  // 6

startsWith()

str.startsWith(searchString[, position])

呼び出した文字列が文字列 searchString で開始されているかを判断します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.startsWith('こ'));  // true

endsWith()

str.endsWith(searchString[, length])

文字列の末尾に指定された文字列 searchString が含まれているかを返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.endsWith('。'));  // true

分解

split()

str.split([separator[, limit]])

呼び出した文字列を、部分文字列 separator が現れるところで分割し、文字列の配列を生成して返します。詳しくはMDNをご覧下さい。

let csv = "佐藤,鈴木,高橋";
console.log(csv.split(','));

separator には正規表現を使うことも出来ます。下の例では separator の前後に位置する空白を含めて、単語を分解します。

let csv = "佐藤 , 鈴木 , 高橋";
console.log(csv.split(/\s*,\s*/));

substr()

substr(start[, length])

start 位置から、length 分の文字数から成る部分文字列を返します。start は 0 から始まるインデックスを指定します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.substr(6, 2));  //

特殊な場合の例を以下に挙げておきます。

let str = "こんにちは。佐藤さん。";
console.log(str.substr(6, -1));   // (空文字が返る) --- (1)
console.log(str.substr(-5, 2));   // 佐藤 --- (2)

(1)の場合（ length < 0 ）、substr は、空文字を返します。

(2)の場合（ start < 0 ）、substr は、負数（ -5 ）を文字列末尾からのインデックスと見なします。従って str.substr(6, 2) と同じ結果になります。一般に、start に負数を指定した場合は、str.substr¹⁾

¹⁾

str.length - start), length) と同じ結果になります。
=== substring() ===

str.substring(start[, end])

上述の substr と似ていますが、start,length の指定ではなく、start と end のインデックスで指定された部分文字列を返します（インデックスは 0 から始まる）。但し、end には部分文字列の次の文字のインデックスを指定します（「end = start + length」の関係が成り立っています）。endを指定しない時は、末尾までが選択されます。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.substring(6, 8));  // 佐藤
console.log(str.substring(6));     // 佐藤さん。

特殊な場合の例を以下に挙げておきます。

let str = "こんにちは。佐藤さん。";
console.log(str.substring(8, 6));   // 佐藤 --- (1)
console.log(str.substring(6, -1));  // こんにちは。 --- (2)

(1)の場合（ start < end ）、substring は、start と end を入れ替えます。従って str.substring(6, 8)) と同じ結果になります。 (2)の場合（ end < 0 ）、substring は、まず負数（ -1 ）を 0 に置き換えた後、（ start < end ）なので、start と end を入れ替えます。従って str.substring(0, 6)) と同じ結果になります。
=== slice() ===

str.slice(start[, end ])

slice は通常の場合（ end >= start >= 0 ）、上述のsubstringと同じ結果になります。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.slice(6, 8));  // 佐藤
console.log(str.slice(6));     // 佐藤さん。

start と end の関係が特殊な場合は substring と異なった結果を返します。

let str = "こんにちは。佐藤さん。";
console.log(str.slice(8, 6));   // (空文字が返る) --- (1)
console.log(str.slice(6, -1));  // 佐藤さん --- (2)

(1)の場合（ start < end ）、slice は、空文字を返します。 (2)の場合（ end < 0 ）、slice は、負数（ -1 ）を文字列末尾からのインデックスと見なします。従って str.slice(6, str.length - 1)) と同じ結果になります。一般に、end に負数を指定した場合は、str.slice(start, str.length - end) と同じ結果になります。
==== 合成 ==== === concat() ===

str.concat(str2 [, ...strN])

２つ（以上）の文字列を連結し、新しい文字列を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.concat('鈴木さん。', '高橋さん。'));  // こんにちは。佐藤さん。鈴木さん。高橋さん。

=== padStart() ===

str.padStart(targetLength [, padString])

現在の文字列の先頭から指定した文字列で埋めた、長さ targetLength 文字の新たな文字列を作成します。詳しくはMDNをご覧下さい。

=== padEnd() ===

str.padEnd(targetLength [, padString])

現在の文字列の末尾から指定された文字列で埋めた、長さ targetLength 文字の新たな文字列を返します。詳しくはMDNをご覧下さい。

=== repeat() ===

str.repeat(count)

オブジェクトの要素を count 回繰り返した文字列を返します。詳しくはMDNをご覧下さい。

==== 正規表現 ==== === match() ===

str.match(regexp)

文字列に対して正規表現 regexp を指定し、合致した部分文字列を取得します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.match(/。/g));  // ["。", "。"]

=== matchAll() ===

str.matchAll(regexp)

regexp が一致するものすべてのイテレーターを返します。詳しくはMDNをご覧下さい。

=== replace() ===

replace(regexp, newSubstr)

文字列に対して正規表現 regexpを使用し、合致した部分をnewSubstrで置換して返します。newSubstr　には置換文字列を生成するための関数を指定することもできます。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.replace(/佐藤/g, '鈴木')); // こんにちは。鈴木さん。

=== replaceAll() ===

const newStr = str.replaceAll(regexp|substr, newSubstr|function)

searchFor が現れたところすべてを replaceWith で置換するために使用します。 searchFor は文字列または正規表現であり、 replaceWith は文字列または関数です。詳しくはMDNをご覧下さい。

=== search() ===

str.search(regexp)

文字列に対してい正規表現 regexp を使用し、合致した最初の文字列の位置を取得します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.search(/佐藤/g));  // 6

==== コード変換 ==== === charAt() ===

let character = str.charAt(index)

指定された位置の文字 (UTF-16 コード 1 つから成ります) を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.charAt(6));  // 佐

=== charCodeAt() ===

str.charCodeAt(index)

与えられた位置の文字の UTF-16 の値を示す数を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.charCodeAt(6));  // 20304

=== codePointAt() ===

str.codePointAt(pos)

指定された位置から始まる UTF-16 エンコードされた際のコードポイントの、コードポイントの値である正の整数を返します。詳しくはMDNをご覧下さい。

let str = "こんにちは。佐藤さん。";
console.log(str.codePointAt(6));  // 20304

Water Sunlight

サイドバー

JavaScript

基本文法

関数

オブジェクト

その他の構文

ラッパーオブジェクト

組込みオブジェクト編

メタ

目次

JavaScript Stringオブジェクト

String()関数

文字コード

UTF-16

静的メソッド

fromCharCode()

fromCodePoint()

raw()

インスタンスプロパティ

length

インスタンスメソッド

基本操作

toString()

valueOf()

toLowerCase()

toUpperCase()

localeCompare()

trim()

trimStart()

trimEnd()

検索

includes()

indexOf()

lastIndexOf()

startsWith()

endsWith()

分解

split()

substr()

Water Sunlight

ユーザ用ツール

サイト用ツール

サイドバー

JavaScript

基本文法

関数

オブジェクト

その他の構文

ラッパーオブジェクト

組込みオブジェクト編

メタ

目次

JavaScript Stringオブジェクト

String()関数

文字コード

UTF-16

静的メソッド

fromCharCode()

fromCodePoint()

raw()

インスタンスプロパティ

length

インスタンスメソッド

基本操作

toString()

valueOf()

toLowerCase()

toUpperCase()

localeCompare()

trim()

trimStart()

trimEnd()

検索

includes()

indexOf()

lastIndexOf()

startsWith()

endsWith()

分解

split()

substr()

ページ用ツール