====== JavaScript Stringオブジェクト ====== --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2021-07-26// [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String|Stringオブジェクト]]は文字列型( string )を扱うためのラッパーオブジェクトです。 本章では、文字列の操作の種類毎に主メソッドの例を示します。文字列の操作には以下の様なものがあります。 * [[#基本操作|基本操作]] * [[#toString()|toString()]] * [[#valueOf()|valueOf()]] * [[#toLowerCase()|toLowerCase()]] * [[#toUpperCase()|toUpperCase()]] * [[#localeCompare()|localeCompare()]] * [[#trim()|trim()]] * [[#trimStart()|trimStart()]] * [[#trimEnd()|trimEnd()]] * [[#charAt()|charAt()]] * [[#検索|検索]] * [[#includes()|includes()]] * [[#indexOf()|indexOf()]] * [[#lastIndexOf()|lastIndexOf()]] * [[#startsWith()|startsWith()]] * [[#endsWith()|endsWith()]] * [[#分解|分解]] * [[#split()|split()]] * [[#substr()|substr()]] * [[#substring()|substring()]] * [[#slice()|slice()]] * [[#合成|合成]] * [[#concat()|concat()]] * [[#padStart()|padStart()]] * [[#padEnd()|padEnd()]] * [[#repeat()|repeat()]] * [[#正規表現|正規表現]] * [[#match()|match()]] * [[#search()|search()]] * [[#replace()|replace()]] * [[#matchAll()|matchAll()]] * [[#replaceAll()|replaceAll()]] * [[#コード変換|コード変換]] * [[#charCodeAt()|charCodeAt()]] * [[#codePointAt()|codePointAt()]] \\ ===== String()関数 ===== Stringオブジェクトはコンストラクタによって以下の様に生成されます。 let string= new String(1); console.log(typeof(string)); // object このコンストラクタは Stringオブジェクトを返しますが、あまり使用されることはなく、[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String|String()]] 関数の方が良く使用されます。 let string= String(1); console.log(typeof(string)); // string 両者の違いは、Stringオブジェクトを返すか、基本データ型( string )を返すかの違いであり、厳密には異なりますが、実務上それは意識する必要がほとんどありません。 \\ ===== 文字コード ===== JavaScriptの文字列型( string )は、文字コードとしてUTF-16を採用しています。クライアントサイドでの通常の文字列操作では文字コードを意識せずに使用できますが、クライアントサイドでAPIを使用したり、サーバサイドでファイルアクセスしたりする場合には、UTF-16を意識しないといけない場面があります。このような場合は、UTF-16との変換メソッド( [[#fromCharCode()|fromCharCode()]] と [[#fromCodePoint()|fromCodePoint()]] )を使用して下さい。 === UTF-16 === UTF-16とは、2バイトで表現できる文字はそのまま2バイトで表現し、それ以外の文字は4バイトで表現したコードです。 日本語の場合、UTF-8とは異なり英数は2バイトで表現されますが、漢字も2バイトで表現できます。従って、漢字の割合が多い場合はUTF-16の方が効率が良いコードになっています。 \\ ===== 静的メソッド ===== 以下に主な Stringオブジェクトの静的メソッドの使用例を示します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String#static_methods|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'' になります。 コードポイントの一覧は[[https://ja.wikipedia.org/wiki/Unicode%E4%B8%80%E8%A6%A7_0000-0FFF|こちら]]を参照して下さい。 Unicodeポイントの符号化方式としては、UTF-8、UTF-16、UTF-32などがあります。 JavaScriptではUTF-16が採用されています。 UTF-32では、符号とコードポイントが同じ値になりますが、それ以外は複雑なルールでコードポイントから符号が決定されます。 console.log(String.fromCodePoint(0x8A9E)); // 語 \\ ==== raw() ==== 生のテンプレート文字列から生成した文字列を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/raw|MDN]]をご覧下さい。 \\ ===== インスタンスプロパティ ===== 以下に主な Stringオブジェクトのインスタンスプロパティの使用例を示します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String#instance_properties|MDN]]をご覧下さい。 ==== length ==== 文字列の length を反映します。読み取り専用です。 let str = "こんにちは。佐藤さん。"; console.log(str.length); // 11 \\ ===== インスタンスメソッド ===== 以下に主な Stringオブジェクトのインスタンスメソッドの使用例を示します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods|MDN]]をご覧下さい。 ==== 基本操作 ==== === toString() === str.toString() 指定されたオブジェクトの文字列を返します。Object.prototype.toString() メソッドを上書きします。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toString|MDN]]をご覧下さい。 let str = "こんにちは"; console.log(str.toString()); // こんにちは \\ === valueOf() === str.valueOf() 指定されたオブジェクトのプリミティブ値(string型の値)を返します。 Object.prototype.valueOf() メソッドを上書きします。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf|MDN]]をご覧下さい。 let str = "こんにちは"; console.log(str.valueOf()); // こんにちは \\ === toLowerCase() === str.toLowerCase() 小文字に変換された文字列を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase|MDN]]をご覧下さい。 let str = "HELLO, SATO."; console.log(str.toLowerCase()); // hello, sato. \\ === toUpperCase() === str.toUpperCase() 大文字に変換された文字列を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase|MDN]]をご覧下さい。 let str = "hello, sato."; console.log(str.toUpperCase()); // HELLO, SATO. \\ === localeCompare() === referenceStr.localeCompare(compareString[, locales[, options]]) referenceStr と compareString を比較し、referenceStr の方が小さい場合は負数(-1)を、同じ場合は0を、大きい場合は正値を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.localeCompare('こんばんは')); // -1 "こんにちは"<"こんばんは" \\ === trim() === str.trim() 文字列の先頭と末尾にある空白を削除します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim|MDN]]をご覧下さい。 let str = " こんにちは "; console.log(str.trim()); // "こんにちは" \\ === trimStart() === str.trimStart() 文字列の先頭にある空白を削除します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart|MDN]]をご覧下さい。 let str = " こんにちは "; console.log(str.trimStart()); // "こんにちは " \\ === trimEnd() === str.trimEnd() 文字列の末尾にある空白を削除します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd|MDN]]をご覧下さい。 let str = " こんにちは "; console.log(str.trimEnd()); // " こんにちは" \\ === charAt() === let character = str.charAt(index) 指定された位置の文字 (UTF-16 コード 1 つから成ります) を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charAt|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.charAt(6)); // 佐 \\ ==== 検索 ==== === includes() === str.includes(searchString[, position]) 文字列中に searchString が含まれているかを返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.includes('佐藤')); // true \\ === indexOf() === str.indexOf(searchValue [, fromIndex]) 呼び出す String オブジェクト中で、 searchValue が最初に現れる位置を返します。見つからなかった場合は -1 を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.indexOf('佐藤')); // 6 \\ === lastIndexOf() === lastIndexOf(searchValue[, fromIndex]) 呼び出す String オブジェクト中で、 searchValue が最後に現れる位置を返します。見つからない場合は -1 を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.lastIndexOf('佐藤')); // 6 \\ === startsWith() === str.startsWith(searchString[, position]) 呼び出した文字列が文字列 searchString で開始されているかを判断します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.startsWith('こ')); // true \\ === endsWith() === str.endsWith(searchString[, length]) 文字列の末尾に指定された文字列 searchString が含まれているかを返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.endsWith('。')); // true \\ ==== 分解 ==== === split() === str.split([separator[, limit]]) 呼び出した文字列を、部分文字列 separator が現れるところで分割し、文字列の配列を生成して返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split|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 から始まるインデックスを指定します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substr|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を指定しない時は、末尾までが選択されます。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring|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と同じ結果になります。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice|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]) 2つ(以上)の文字列を連結し、新しい文字列を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.concat('鈴木さん。', '高橋さん。')); // こんにちは。佐藤さん。鈴木さん。高橋さん。 \\ === padStart() === str.padStart(targetLength [, padString]) 先頭を padString で埋めた、長さ targetLength の新しい文字列を作成します。padString が省略された場合は空白になります。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart|MDN]]をご覧下さい。 let str = "佐藤"; console.log(str.padStart(5)); // " 佐藤" \\ === padEnd() === str.padEnd(targetLength [, padString]) 末尾を padString で埋めた、長さ targetLength の新しい文字列を作成します。padString が省略された場合は空白になります。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd|MDN]]をご覧下さい。 let str = "佐藤"; console.log(str.padEnd(5)); // "佐藤 " \\ === repeat() === str.repeat(count) count 回繰り返した文字列を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/repeat|MDN]]をご覧下さい。 let str = "佐藤"; console.log(str.repeat(3)); // 佐藤佐藤佐藤 \\ ==== 正規表現 ==== === match() === str.match(regexp) 文字列に対して正規表現 regexp を指定し、合致した部分文字列を取得します。 let str = "こんにちは。佐藤さん、鈴木さん、高橋さん"; console.log(str.match(/(佐藤|鈴木|高橋)/g)); // ["佐藤", "鈴木", "高橋"] /g フラグの有無によって返される値が異なります。上例では合致した部分文字列の配列が返されます。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match|MDN]]をご覧下さい。 \\ === search() === str.search(regexp) 文字列に対してい正規表現 regexp を使用し、合致した最初の文字列の位置を取得します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.search(/佐藤/g)); // 6 \\ === replace() === replace(regexp, newSubstr) 文字列に対して正規表現 regexpを使用し、合致した部分をnewSubstrで置換して返します。newSubstr には置換文字列を生成するための関数を指定することもできます。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.replace(/佐藤/g, '鈴木')); // こんにちは。鈴木さん。 \\ === matchAll() === str.matchAll(regexp) キャプチャグループを含む regexp が一致するすべてのイテレーターを返します。regexp の ''/g'' フラグは必須です。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん、鈴木さん、高橋さん"; let matches = str.matchAll(/(佐藤|鈴木|高橋)さん/g); for(match of matches) { console.log(match); } // 出力結果 // ["佐藤さん", "佐藤", index: 6, input: "こんにちは。佐藤さん、鈴木さん、高橋さん", ... ] // ["鈴木さん", "鈴木", index: 11, input: "こんにちは。佐藤さん、鈴木さん、高橋さん", ... ] // ["高橋さん", "高橋", index: 16, input: "こんにちは。佐藤さん、鈴木さん、高橋さん", ... ] \\ === replaceAll() === const newStr = str.replaceAll(searchFor, replaceWith) searchFor が現れたところすべてを replaceWith で置換するために使用します。 searchFor は文字列または正規表現であり、 replaceWith は文字列または関数です。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん、鈴木さん、高橋さん"; console.log(str.replaceAll(/(佐藤|鈴木|高橋)/g, '***')); // こんにちは。***さん、***さん、***さん \\ ==== コード変換 ==== === charCodeAt() === str.charCodeAt(index) 与えられた位置の文字の UTF-16 の値を示す数を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.charCodeAt(6)); // 20304 \\ === codePointAt() === str.codePointAt(pos) 指定された位置から始まる UTF-16 エンコードされた際のコードポイントの、コードポイントの値である正の整数を返します。詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt|MDN]]をご覧下さい。 let str = "こんにちは。佐藤さん。"; console.log(str.codePointAt(6)); // 20304 \\