文字列について(String)
文字列について
■文字列について
■文字列のデータ型について
文字列は、プリミティブ型となります。
基本的で単純なデータ型です。
文字列を他の変数に渡すと、文字列全体が複製され、新しい文字列となります。
■文字コードについて
Netscape 4 のような古いブラウザでない限り、Unicode で動作します。
JavaScript 内部では、UTF-16 形式で処理されます。
これにより、追加面の文字(U+10000 ~ U+10ffff)が含まれる場合、サロゲートペアを考慮する必要があります。
追加面の文字は、絵文字などが該当します。
テキストの読み込みや、テキストの出力などの処理には、UTF-8 が採用されます。
■String クラスについて
String クラスは、文字列用のクラスです。
■文字列から String クラスのプロパティやメソッドを利用する
文字列の後に、ドット演算子や配列アクセス演算子を記述すると、その瞬間だけ String オブジェクトに変換されます。
プロパティの追加を試みてもエラーは発生しませんが、永続しないため無意味です。
文字列を作成する
■String コンストラクタについて
new String ( "値情報" ) :Object
第01引数(略可) | String | オブジェクト内に値情報 [[PrimitiveValue]] を保有したい場合に指定する。 |
戻り値 | Object | Object オブジェクト |
文字列を指定して、オブジェクトを作成する
// ------------------------------------------------------------
// String オブジェクトを作成する(文字列の作成ではない)
// ------------------------------------------------------------
var obj = new String("あいうえお");
// データ型を確認する(オブジェクトの一種である)
console.log(typeof(obj)); // "object"
// 値情報を取得する
console.log(obj.valueOf()); // "あいうえお"
// 文字列情報を取得する
console.log(obj.toString()); // "あいうえお"
// ------------------------------------------------------------
// 文字列型のデータを指定して、オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object("あいうえお");
// データ型を確認する(オブジェクトの一種である)
console.log(typeof(obj)); // "object"
// 値情報を取得する
console.log(obj.valueOf()); // "あいうえお"
// 文字列情報を取得する
console.log(obj.toString()); // "あいうえお"
■文字列リテラルについて
文字列を作成するには、文字列リテラルを使用します。
文字列全体を、シングルクォーテーション『' '』 か ダブルクォーテーション『" "』でくくります。
文字列リテラルを使って、文字列を作成する
// 文字列を作成する
var str = 'あいうえお';
文字列リテラルを使って、文字列を作成する
// 文字列を作成する
var str = "かきくけこ";
■文字列中にクォーテーションマークを利用する
『' '』 でくくった場合、文字列内に『 ' 』と記述する事はできません。
かわりに、『 \' 』と記述します。
『" "』 でくくった場合、文字列内に『 " 』と記述する事はできません。
かわりに、『 \" 』と記述します。
エスケープ文字を使用して、文字列中にクォーテーションを利用する
var str = '<element attribute = "value" >';
var str = "<element attribute = 'value' >";
var str = '<element attribute = \'value\' >';
var str = "<element attribute = \"value\" >";
■シングルクォーテーションとダブルクォーテーションの違いについて
必要となるエスケープ文字が変化するだけです。
C 言語のように、シングルクォーテーションを使って、1文字を表現する事はできません。
CGI スクリプトのように、ダブルクォーテーションを使って、変数の中身を展開する事はできません。
■配列アクセス演算子について
配列アクセス演算子を使用すると、任意の番地に存在する文字を取得する事ができます。
書き込みアクセスを行う事はできません。
文字列の任意の番地の文字を取得する(配列アクセス演算子を使用)
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str = "あいうえおかきくけこ";
// ------------------------------------------------------------
// 文字列の任意の番地の文字を取得する(配列アクセス演算子を使用)
// ------------------------------------------------------------
// 0 番目の文字を取得
var c0 = str[0];
// 2 番目の文字を取得
var c1 = str[2];
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // "あ"
console.log(c1); // "う"
文字列の任意の番地の文字を取得する(getChar() メソッドを使用)
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str = "あいうえおかきくけこ";
// ------------------------------------------------------------
// 文字列の任意の番地の文字を取得する(getChar() メソッドを使用)
// ------------------------------------------------------------
// 1 番目の文字を取得
var c0 = str.charAt(1);
// 3 番目の文字を取得
var c1 = str.charAt(3);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // "い"
console.log(c1); // "え"
■文字列の連結について
■文字列と文字列の連結について
連結演算子『 + 』『 += 』を使用すると、文字列同士を連結する事ができます。
2つの文字列を連結し、新しい1つの文字列が生成されます。
文字列の最後尾に、任意の文字列を連結する
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str = "あいうえお";
// ------------------------------------------------------------
// 文字列の最後尾に、任意の文字列を連結する
// ------------------------------------------------------------
str += "かきくけこ";
// 出力テスト
console.log(str); // "あいうえおかきくけこ"
文字列同士を連結し、新しい文字列を生成する
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str0 = "あいうえお";
var str1 = "かきくけこ";
// ------------------------------------------------------------
// 文字列同士を連結し、新しい文字列を生成する
// ------------------------------------------------------------
var str2 = str0 + str1;
// 出力テスト
console.log(str2); // "あいうえおかきくけこ"
■数値と文字列の連結について
「数値」と「文字列」を連結すると、結果は「文字列」となります。
「数値」と「文字列」を連結した場合の動作を確認する
// 文字列を作成する
var str = 123 + "あいう";
// 出力テスト
console.log(str); // "123あいう
■数値の計算と、文字列の連結が混在している場合
例えば、以下のような連結を行います。
数値の計算と、文字列の連結が混在している場合
// 文字列を作成する
var str = 1 + 2 + 3 + "あいう" + 49 + 58 + 67 + "かきく";
// 出力テスト
console.log(str); // "6あいう495867かきく"
左から順番に計算されます。
「 1 + 2 + 3 」までは、数値同士の計算です。
それ以降の「 "あいう" + 49 + 58 + 67 + "かきく" 」は、文字列としての連結となります。
丸括弧 () を付けると、先に計算を発生させる事ができます。
数値の計算と、文字列の連結が混在している場合は、数値の計算部分に、できるだけ丸括弧 () を付けておくといいでしょう。
「数値」の計算を先に行いたい場合は、丸括弧を付ける
// 文字列を作成する
var str = (1 + 2 + 3) + "あいう" + (49 + 58 + 67) + "かきく";
// 出力テスト
console.log(str); // "6あいう174かきく"
■文字列の比較について
■文字列同士が一致しているか調べる
厳密等価演算子『 === 』を使用すると、文字列同士が一致しているか調べる事ができます。
文字列同士が一致しているか調べる
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str0 = "あいうえお";
var str1 = "あいうえお";
// ------------------------------------------------------------
// 文字列が一致しているか調べる
// ------------------------------------------------------------
var result = (str0 === str1);
// 出力テスト
console.log(result); // true
■文字列同士を比較する
比較演算子『 < 』『 > 』を使用すると、文字列同士を比較する事ができます。
文字コードの大小を比較します。
localeCompare() メソッドを使って比較する事もできます。
文字列同士を比較する
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str0 = "あああああ";
var str1 = "ああああい";
// ------------------------------------------------------------
// 文字列を比較する
// ------------------------------------------------------------
if(str0 === str1){
console.log("厳密に等しい");
}else if(str0 < str1){
console.log(str0 + " < " + str1);
}else if(str0 > str1){
console.log(str0 + " > " + str1);
}
String クラスのプロパティについて
■String クラスのプロパティ
String クラスには、以下のプロパティがあります。
■文字列の長さを取得する(UTF-16 配列の個数)
length プロパティを使用します。
得られる値は、UTF-16 配列の個数を意味します。
基本面の文字(U+0000 ~ U+ffff)は、1文字ごとに1個(2バイト)消費します。
追加面の文字(U+10000 ~ U+10ffff)は、1文字ごとに2個(4バイト)消費します。
正確な文字数を取得する方法については、こちらで解説しています。
■使用例
文字の総数を調べる
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str = "あいうえお";
// ------------------------------------------------------------
// 文字の総数を取得
// ------------------------------------------------------------
var num = str.length;
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(num); // 5
サロゲートペアとなる文字を含む場合
// ------------------------------------------------------------
// 追加面の文字を含む文字列を用意する
// ------------------------------------------------------------
var str = "😃"; // [ 0xD83D , 0xDE03 ]
// ------------------------------------------------------------
// UTF-16 配列の個数を取得
// ------------------------------------------------------------
console.log( str.length ); // 2
■文字の総数を取得する(UTF-32 配列の個数)
■代替関数
Internet Explorer 6 でも動作する代替関数です。
文字の総数を取得する関数(UTF-32 配列の個数)
// ------------------------------------------------------------
// 文字の総数を取得する関数(UTF-32 配列の個数)
// ------------------------------------------------------------
function String_Get_CharLength(str){
var cnt = 0;
var p = 0;
var num = str.length;
while(p < num){
var c0 = str.charCodeAt(p);
p += 1;
if((c0 & 0xFC00) == 0xD800){
var c1 = str.charCodeAt(p) || 0;
if((c1 & 0xFC00) == 0xDC00){
p += 1;
}
}
cnt += 1;
}
return cnt;
}
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str0 = "あいうえお";
var str1 = "😃😃😃";
// ------------------------------------------------------------
// 文字数を確認する
// ------------------------------------------------------------
console.log( String_Get_CharLength(str0) ); // 5
console.log( String_Get_CharLength(str1) ); // 3
String クラスのメソッドについて
■String クラスのメソッド一覧
String クラスには、以下のメソッドがあります。
メソッド | 説明 |
String.fromCharCode() | 文字コード(UTF-16)を指定して、文字列を取得する。 |
String.fromCodePoint() | 文字コード(UTF-32)を指定して、文字列を取得する。 |
charAt() | 位置を指定して、文字列から1文字(UTF-16)を取得する。 |
* | 位置を指定して、文字列から1文字(UTF-32)を取得する。 |
charCodeAt() | 位置を指定して、文字列から文字コード(UTF-16)を取得する。 |
codePointAt() | 位置を指定して、文字列から文字コード(UTF-32)を取得する。 |
concat() | 2つ以上の文字列を繋げて、新しい文字列を取得する。 |
slice() | 開始位置と終了位置を指定して、新しい文字列を取得する。 |
substring() | 開始位置と終了位置を指定して、新しい文字列を取得する。(逆指定可) |
substr() | 開始位置と個数を指定して、新しい文字列を取得する。 |
indexOf() | 最先頭から文字列内を検索し、見つかった位置を取得する。 |
lastIndexOf() | 最後尾から文字列内を検索し、見つかった位置を取得する。 |
contains() | 最先頭から文字列内を検索し、任意のワードが含まれるか調べる。 |
startsWith() | 最先頭から任意のワードが始まっているか調べる。 |
endsWith() | 最後尾から任意のワードが始まっているか調べる。 |
localeCompare() | 文字列同士を比較する。 |
toLowerCase() | 大文字を小文字に変換した結果を取得する。(通常) |
toUpperCase() | 小文字を大文字に変換した結果を取得する。(通常) |
toLocaleLowerCase() | 大文字を小文字に変換した結果を取得する。(実行環境のロケールを考慮) |
toLocaleUpperCase() | 小文字を大文字に変換した結果を取得する。(実行環境のロケールを考慮) |
trim() | 連続する「空白,タブ,改行」を除去した結果を取得する。(最先頭と最後尾のみ) |
trimLeft() | 連続する「空白,タブ,改行」を除去した結果を取得する。(最先頭のみ) |
trimRight() | 連続する「空白,タブ,改行」を除去した結果を取得する。(最後尾のみ) |
■正規表現に対応しているメソッド
メソッド | 説明 |
split() | 指定したワードで文字列を分割し、結果を配列で取得する。 |
search() | 文字列内を検索し、正規表現マッチした位置を取得する。 |
match() | 文字列内を検索し、正規表現マッチした詳細な結果を取得する。 |
replace() | 文字列を置換した結果を、新しい文字列として取得する。 |
■HTML 文字列生成用のメソッド
メソッド | 説明 |
anchor() | HTML 文字列を生成する。 <a name="[引数]">[元の文字列]</a> |
link() | HTML 文字列を生成する。 <a href="[引数]">[元の文字列]</a> |
small() | HTML 文字列を生成する。 <small>[元の文字列]</small> |
big() | HTML 文字列を生成する。 <big>[元の文字列]</big> |
bold() | HTML 文字列を生成する。 <b>[元の文字列]</b> |
italics() | HTML 文字列を生成する。 <i>[元の文字列]</i> |
fontcolor() | HTML 文字列を生成する。 <font color="[引数]">[元の文字列]</font> |
fontsize() | HTML 文字列を生成する。 <font size="[引数]">[元の文字列]</font> |
blink() | HTML 文字列を生成する。 <blink>[元の文字列]</blink> |
strike() | HTML 文字列を生成する。 <strike>[元の文字列]</strike> |
sub() | HTML 文字列を生成する。 <sub>[元の文字列]</sub> |
sup() | HTML 文字列を生成する。 <sup>[元の文字列]</sup> |
fixed() | HTML 文字列を生成する。 <tt>[元の文字列]</tt> |
■文字コード(UTF-16)を指定して、文字列を取得する
String.fromCharCode( 文字コード ... ) :String
可変引数(略可) | Number | 文字コード(UTF-16)を指定する。可変引数から複数の文字コードの指定が可能。 |
戻り値 | String | 文字列が得られる。存在しない場合、空文字が得られる。 |
■取得例
文字コードを指定して、1文字を取得する。
// ------------------------------------------------------------
// 文字コードを指定して、1文字を取得する
// ------------------------------------------------------------
var c0 = String.fromCharCode(0x41);
var c1 = String.fromCharCode(0x3042);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // "A"
console.log(c1); // "あ"
文字コードを順番に指定して、文字列を取得する。
// ------------------------------------------------------------
// 文字コードを順番に指定して、文字列を取得する。
// ------------------------------------------------------------
var str = String.fromCharCode( 0x41 , 0x42 , 0x43 , 0x44 , 0x45 , 0x46 , 0x47 );
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(str); // "ABCDEFG"
サロゲートペアとなる文字を含む場合
// ------------------------------------------------------------
// 追加面の文字に該当するユニコード(UTF-32)を用意する
// ------------------------------------------------------------
var code = 0x1F603; // "😃"
// ------------------------------------------------------------
// ユニコード(UTF-32)から、サロゲートペア(UTF-16)に変換する
// ------------------------------------------------------------
var upper = ((code - 0x10000) >>> 10) + 0xD800;
var lower = ((code - 0x10000) & 0x3FF) + 0xDC00;
// ------------------------------------------------------------
// 可変引数を使って出力した場合
// ------------------------------------------------------------
var str0 = String.fromCharCode( upper , lower ); // [ 0xD83D , 0xDE03 ]
// 出力テスト
console.log( str0 ); // "😃"
// ------------------------------------------------------------
// 個別に出力して後で連結した場合
// ------------------------------------------------------------
var str1 = String.fromCharCode( upper ); // 0xD83D
var str2 = String.fromCharCode( lower ); // 0xDE03
// 出力テスト
console.log( (str1 + str2) ); // "😃"
■文字コード(UTF-32)を指定して、文字列を取得する
ECMAScript 6 世代の機能です。
String.fromCodePoint( 文字コード ... ) :String
可変引数(略可) | Number | 文字コード(UTF-32)を指定する。可変引数から複数の文字コードの指定が可能。 |
戻り値 | String | 文字列が得られる。存在しない場合、空文字が得られる。 |
■取得例
文字コード(UTF-32)を指定して、1文字を取得する。
// ------------------------------------------------------------
// 文字コード(UTF-32)を指定して、1文字を取得する
// ------------------------------------------------------------
var c0 = String.fromCodePoint(0x41);
var c1 = String.fromCodePoint(0x3042);
var c2 = String.fromCodePoint(0x1F603);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // "A"
console.log(c1); // "あ"
console.log(c2); // "😃"
■代替関数
Internet Explorer 6 でも動作する代替関数です。
文字コード(UTF-32)を指定して、文字列を取得する関数
// ------------------------------------------------------------
// 文字コード(UTF-32)を指定して、文字列を取得する関数
// ------------------------------------------------------------
function String_FromCodePoint(code){
var a = new Array();
var i;
var num = arguments.length;
for(i=0;i < num;i++){
var c = Number(arguments[i]);
if(0x0000 <= c && c <= 0xffff){
a.push(String.fromCharCode(c));
}else if(0x010000 <= c && c <= 0x10ffff){
a.push(String.fromCharCode(((c - 0x10000) >>> 10) + 0xD800));
a.push(String.fromCharCode(((c - 0x10000) & 0x3FF) + 0xDC00));
}else{
throw new Error("Invalid code point");
}
}
return a.join("");
}
// ------------------------------------------------------------
// 文字コード(UTF-32)を指定して、1文字を取得する
// ------------------------------------------------------------
var c0 = String_FromCodePoint(0x41);
var c1 = String_FromCodePoint(0x3042);
var c2 = String_FromCodePoint(0x1F603);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // "A"
console.log(c1); // "あ"
console.log(c2); // "😃"
■位置を指定して、文字列から1文字(UTF-16)を取得する
charAt() メソッドを使用します。
得られる情報は、UTF-16 配列の1個分(0x0000 ~ 0xffff)です。
追加面の文字(U+10000 ~ U+10ffff)を1文字分として取得する方法については、こちらで解説しています。
String.charAt( 位置 ) :String
第01引数(略可) | Number | 位置を指定する。デフォルトは 0 |
戻り値 | String | 1文字だけ格納された文字列が得られる。存在しない場合、空文字が得られる。 |
■取得例
位置を指定して、文字列から1文字を取得する。
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "あいうえお";
// ------------------------------------------------------------
// 位置を指定して、文字列から1文字を取得する
// ------------------------------------------------------------
var c0 = str.charAt(1);
var c1 = str.charAt(3);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // "い"
console.log(c1); // "え"
サロゲートペアとなる文字を含む場合
// ------------------------------------------------------------
// 追加面の文字を含む文字列を用意する
// ------------------------------------------------------------
var str = "😃"; // [ 0xD83D , 0xDE03 ]
// ------------------------------------------------------------
// 番地を指定して、UTF-16 配列から各サロゲートを取得する
// ------------------------------------------------------------
var upper = str.charAt(0);
var lower = str.charAt(1);
// 出力テスト
console.log( upper.charCodeAt(0) ); // 0xD83D
console.log( lower.charCodeAt(0) ); // 0xDE03
// ------------------------------------------------------------
// 文字列を結合する
// ------------------------------------------------------------
var c = upper + lower;
// 出力テスト
console.log( c ); // "😃" [ 0xD83D , 0xDE03 ]
■位置を指定して、文字列から1文字(UTF-32)を取得する
■代替関数
Internet Explorer 6 でも動作する代替関数です。
位置を指定して、文字列から1文字(UTF-32)を取得する関数
// ------------------------------------------------------------
// 位置を指定して、文字列から1文字(UTF-32)を取得する関数
// ------------------------------------------------------------
function String_Get_CharAt(str,index){
var cnt = 0;
var a = 0;
var p = 0;
var num = str.length;
while(p < num){
var c0 = str.charCodeAt(p);
a = 1;
if((c0 & 0xFC00) == 0xD800){
var c1 = str.charCodeAt(p+1) || 0;
if((c1 & 0xFC00) == 0xDC00){
a = 2;
}
}
if(cnt == index) return str.substr(p,a);
p += a;
cnt += 1;
}
return "";
}
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str = "あいうえお😃😃😃";
// ------------------------------------------------------------
// 位置を指定して、文字列から1文字(UTF-32)を取得する
// ------------------------------------------------------------
console.log( String_Get_CharAt(str,1) ); // "い"
console.log( String_Get_CharAt(str,5) ); // "😃"
■位置を指定して、文字列から文字コード(UTF-16)を取得する
charCodeAt() メソッドを使用します。
戻り値から、文字コード(UTF-16)が得られます。
String.charCodeAt( 位置 ) :Number
第01引数(略可) | Number | 位置を指定する。デフォルトは 0 |
戻り値 | Number | 文字コード(UTF-16)が得られる。存在しない場合、NaN 値が得られる。 |
■取得例
位置を指定して、文字列から文字コードを取得する。
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "あいうえお";
// ------------------------------------------------------------
// 位置を指定して、文字列から文字コードを取得する
// ------------------------------------------------------------
var c0 = str.charCodeAt(0);
var c1 = str.charCodeAt(3);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // 12354 (0x3042)
console.log(c1); // 12360 (0x3048)
任意の文字コードを取得する。
// ------------------------------------------------------------
// 'あ' の文字コードを取得
// ------------------------------------------------------------
var c = 'あ'.charCodeAt();
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c); // 12354 (0x3042)
サロゲートペアとなる文字のコードを取得する。
// ------------------------------------------------------------
// 追加面の文字を含む文字列を用意する
// ------------------------------------------------------------
var str = "😃"; // U+1F603
// ------------------------------------------------------------
// 4バイト分の文字コード(UTF-16)を取得
// ------------------------------------------------------------
var upper = str.charCodeAt(0); // 0xD83D
var lower = str.charCodeAt(1); // 0xDE03
// ------------------------------------------------------------
// サロゲートペア(UTF-16)から、ユニコード(UTF-32)に変換
// ------------------------------------------------------------
var code = (((upper - 0xD800) << 10) | ((lower - 0xDC00) & 0x3FF)) + 0x10000;
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( code.toString(16) ); // 0x1F603
■位置を指定して、文字列から文字コード(UTF-32)を取得する
codePointAt() メソッドを使用します。
戻り値から、文字コード(UTF-32)が得られます。
ECMAScript 6 世代の機能です。
String.codePointAt( 位置 ) :Number
第01引数(略可) | Number | 位置を指定する。デフォルトは 0 |
戻り値 | Number | 文字コード(UTF-32)が得られる。存在しない場合は undefined 値が得られる。 |
■取得例
位置を指定して、文字列から文字コードを取得する。
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "あいうえお😃😃😃";
// ------------------------------------------------------------
// 位置を指定して、文字列から文字コードを取得する
// ------------------------------------------------------------
var c0 = str.codePointAt(1);
var c1 = str.codePointAt(5);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // 12356 (0x3044)
console.log(c1); // 128515 (0x1f603)
■代替関数
Internet Explorer 6 でも動作する代替関数です。
位置を指定して、文字列から文字コード(UTF-32)を取得する関数
// ------------------------------------------------------------
// 位置を指定して、文字列から文字コード(UTF-32)を取得する関数
// ------------------------------------------------------------
function String_Get_CodePointAt(str,index){
var cnt = 0;
var p = 0;
var num = str.length;
while(p < num){
var c0 = str.charCodeAt(p);
p += 1;
if((c0 & 0xFC00) == 0xD800){
var c1 = str.charCodeAt(p) || 0;
if((c1 & 0xFC00) == 0xDC00){
c0 = (((c0 - 0xD800) << 10) | ((c1 - 0xDC00) & 0x3FF)) + 0x10000;
p += 1;
}
}
if(cnt == index) return c0;
cnt += 1;
}
return undefined;
}
// ------------------------------------------------------------
// 文字列を作成する
// ------------------------------------------------------------
var str = "あいうえお😃😃😃";
// ------------------------------------------------------------
// 位置を指定して、文字列から文字コードを取得する
// ------------------------------------------------------------
var c0 = String_Get_CodePointAt(str , 1);
var c1 = String_Get_CodePointAt(str , 5);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(c0); // 12356 (0x3044)
console.log(c1); // 128515 (0x1f603)
■2つ以上の文字列を繋げて、新しい文字列を取得する
String.concat( 文字列 ... ) :String
可変引数(略可) | String | 連結したい文字列を指定。引数の最先頭から最後尾の順番で結合される。 |
戻り値 | String | 新しい文字列が得られる。 |
■使用例
2つの文字列を結合して、新しい文字列を取得する。
// 文字列を作成
var str0 = "あいうえお";
var str1 = "かきくけこ";
// 文字列を結合して、新しい文字列を取得する
var str2 = str0.concat(str1);
// 出力テスト
console.log(str2); // "あいうえおかきくけこ"
4つの文字列を結合して、新しい文字列を取得する。
// 文字列を結合して、新しい文字列を取得する
var str = "あいう".concat("え" , "おか" , "き" , "くけこ");
// 出力テスト
console.log(str); // "あいうえおかきくけこ"
■開始位置と終了位置を指定して、新しい文字列を取得する(スライス)
slice() メソッドを使用します。
substring() メソッドと違い、開始位置と終了位置を、逆に指定する事はできません。
第02引数で指定する終了位置は、取得対象に含まれません。
String.slice( 開始位置 , 終了位置 ) :String
第01引数(略可) | Number | 開始位置を指定。(0 から始まる番号)デフォルトは 0 |
第02引数(略可) | Number | 終了位置を指定。(0 から始まる番号)省略した場合は最後尾まで。 マイナス値を指定すると「length + 第02引数」 の位置。(-1で最後尾は含まれない) |
戻り値 | String | 新しい文字列が得られる。 |
■使用例
開始位置と終了位置を指定して、新しい文字列を取得する
// 文字列を作成
var str0 = "あいうえおかきくけこ";
// 開始位置と終了位置を指定して、新しい文字列を取得する
var str1 = str0.slice(2,5);
// 出力テスト
console.log(str1); // "うえお"
■開始位置と終了位置を指定して、新しい文字列を取得する(逆指定可)
substring() メソッドを使用します。
slice() メソッドと違い、開始位置と終了位置を、逆に指定しても動作します。
終了位置は、取得対象に含まれません。
String.substring( 開始位置 , 終了位置 ) :String
第01引数(略可) | Number | 開始位置を指定。(0 から始まる番号)デフォルトは 0 |
第02引数(略可) | Number | 終了位置を指定。(0 から始まる番号)省略した場合は最後尾まで。 第01引数より小さい値を指定した場合、第02引数が開始位置となり、第01引数が終了位置となる。 |
戻り値 | String | 新しい文字列が得られる。 |
■使用例
開始位置と終了位置を指定して、新しい文字列を取得する
// 文字列を作成
var str0 = "あいうえおかきくけこ";
// 開始位置と終了位置を指定して、新しい文字列を取得する
var str1 = str0.substring(2,5);
// 出力テスト
console.log(str1); // "うえお"
■開始位置と個数を指定して、新しい文字列を取得する
substr() メソッドを使用します。
String.substr( 開始位置 , 個数 ) :String
第01引数(略可) | Number | 開始位置を指定。(0 から始まる番号)デフォルトは 0 |
第02引数(略可) | Number | 個数を指定。省略した場合は最後尾まで。0 以下の値を指定すると空文字が得られる。 |
戻り値 | String | 新しい文字列が得られる。 |
■使用例
開始位置と個数を指定して、新しい文字列を取得する
// 文字列を作成
var str0 = "あいうえおかきくけこ";
// 開始位置と個数を指定して、新しい文字列を取得する
var str1 = str0.substr(5,3);
// 出力テスト
console.log(str1); // "かきく"
■最先頭から文字列内を検索し、見つかった位置を取得する
indexOf() メソッドを使用します。
最先頭からではなく、途中から検索を開始したい場合は、第02引数に開始位置を指定します。
String.indexOf( "検索ワード" , 検索開始位置 ) :Number
第01引数(略可) | String | 検索ワードを指定。 |
第02引数(略可) | Number | 検索を開始する位置を指定。デフォルトは 0 |
戻り値 | Number | ワードが見つかった場合、位置が得られる。ワードが見つからなかった場合、-1 が得られる。 |
■使用例
最先頭から文字列内を検索し、見つかった位置を取得する
// 文字列を作成
var str = "---あいう-----";
// 最先頭から文字列内を検索する
var pos = str.indexOf("あいう");
// 出力テスト
console.log(pos); // 3
本文全体を、最先頭から順番に検索する
// 検索本文
var source = "--あいう------あいう--あいう------あいう--------";
// 検索ワード
var search = "あいう";
// 検索位置
var pos = 0;
while(true){
// 指定位置から文字列内を検索する
pos = source.indexOf(search,pos);
// 見つからなかった場合終了
if(pos == -1) break;
// 出力テスト
console.log("pos:" + pos);
// 次の検索開始位置
pos += search.length;
}
■最後尾から文字列内を検索し、見つかった位置を取得する
lastIndexOf() メソッドを使用します。
最後尾からではなく、途中から検索を開始したい場合は、第02引数に開始位置を指定します。
例えば、文字列の最後尾から調べるなら、( length - (検索ワードの文字数) ) を指定します。
例えば、文字列の最後尾の1つ前から調べるなら、( length - (検索ワードの文字数) - 1 ) を指定します。
String.lastIndexOf( "検索ワード" , 検索開始位置 ) :Number
第01引数(略可) | String | 検索ワードを指定。 |
第02引数(略可) | Number | 検索を開始する位置を指定。デフォルトは最後尾から。マイナス値を指定した場合、0 と同等なので要注意。 |
戻り値 | Number | ワードが見つかった場合、位置が得られる。ワードが見つからなかった場合、-1 が得られる。 |
■使用例
最後尾から文字列内を検索し、見つかった位置を取得する
// 文字列を作成
var str = "-----あいう---";
// 最後尾から文字列内を検索する
var pos = str.lastIndexOf("あいう");
// 出力テスト
console.log(pos); // 5
本文全体を、最後尾から順番に検索する
// 検索本文
var source = "--あいう------あいう--あいう------あいう--------";
// 検索ワード
var search = "あいう";
// 検索位置
var pos = source.length;
while(pos >= 0){
// 指定位置から文字列内を検索する
pos = source.lastIndexOf(search,pos);
// 見つからなかった場合終了
if(pos == -1) break;
// 出力テスト
console.log("pos:" + pos);
// 次の検索開始位置
pos -= search.length;
}
■最先頭から文字列内を検索し、任意のワードが含まれるか調べる
contains() メソッドを使用します。
このメソッドは、一部のブラウザでのみ動作します。
最先頭からではなく、途中から検索を開始したい場合は、第02引数に開始位置を指定します。
String.contains( "検索ワード" , 検索開始位置 ) :Boolean
第01引数(略可) | String | 検索ワードを指定。 |
第02引数(略可) | Number | 検索を開始する位置を指定。デフォルトは 0 |
戻り値 | Boolean | ワードが見つかった場合 true、見つからなかった場合 false が得られる。 |
■使用例
最先頭から文字列内を検索し、任意のワードが含まれるか調べる
// 文字列を作成
var str = "---あいう-----";
// 最先頭から文字列内を検索する
var result = str.contains("あいう");
// 出力テスト
console.log(result); // true
■最先頭から任意のワードが始まっているか調べる
startsWith() メソッドを使用します。
このメソッドは、一部のブラウザでのみ動作します。
最先頭からではなく、途中から始まってるか調べたい場合は、第02引数に開始位置を指定します。
String.startsWith( "検索ワード" , 検索開始位置 ) :Boolean
第01引数(略可) | String | 検索ワードを指定。 |
第02引数(略可) | Number | 検索を開始する位置を指定。デフォルトは 0 |
戻り値 | Boolean | 指定した位置からワードが始まっている場合 true、それ以外の場合 false が得られる。 |
■使用例
最先頭から任意のワードが始まっているか調べる
// 文字列を作成
var str = "あいう-----";
// 最先頭からワードが始まっているか調べる
var result = str.startsWith("あいう");
// 出力テスト
console.log(result); // true
2 文字目から任意のワードが始まっているか調べる
// 文字列を作成
var str = "--あいう-----";
// 2 文字目からからワードが始まっているか調べる
var result = str.startsWith("あいう" , 2);
// 出力テスト
console.log(result); // true
■最後尾から任意のワードが始まっているか調べる
endsWith() メソッドを使用します。
このメソッドは、一部のブラウザでのみ動作します。
最後尾からではなく、途中から始まっているか調べたい場合は、第02引数に開始位置を指定します。
例えば、文字列の最後尾から調べるなら、( length ) を指定します。
例えば、文字列の最後尾の1つ前から調べるなら、( length - 1 ) を指定します。
String.endsWith( "検索ワード" , 検索開始位置 ) :Boolean
第01引数(略可) | String | 検索ワードを指定。 |
第02引数(略可) | Number | 検索を開始する位置を指定。デフォルトは最後尾から。 |
戻り値 | Boolean | 指定した位置からワードが始まっている場合 true、それ以外の場合 false が得られる。 |
■使用例
最後尾から任意のワードが始まっているか調べる
// 文字列を作成
var str = "-----あいう";
// 最後尾からワードが始まっているか調べる
var result = str.endsWith("あいう");
// 出力テスト
console.log(result); // true
最後尾の 2 文字前から任意のワードが始まっているか調べる
// 文字列を作成
var str = "-----あいう--";
// 最後尾の 2 文字前からワードが始まっているか調べる
var result = str.endsWith("あいう" , str.length - 2);
// 出力テスト
console.log(result); // true
■文字列同士を比較する
localeCompare() メソッドを使用します。
第02~03引数は、一部のブラウザで動作します。
比較演算子を使って、調べる事もできます。
String.localeCompare( "比較文字列" , "言語コード" , オプション ) :Number
第01引数(略可) | String | 比較文字列を指定。 |
第02引数(略可) | String | 言語コードを指定。"ja-JP" など。拡張設定あり。 |
第03引数(略可) | Object | オプションをオブジェクト形式で指定。 |
戻り値 | Number | 第01引数の方が、大きい場合 -1、一致する場合 0、小さい場合 +1 が得られる。 |
■第02引数(言語コード)
言語コードを指定します。
言語コードの最後尾に、Unicode 拡張 "-u-" を追加する事ができます。
拡張キー | 型 | 説明 |
language-region-u-co-(値) | String | 通常とは異なる比較順序となる、以下のタイプを指定。 "big5han" "dict" "direct" "ducet" "gb2312" "phonebk" "phonetic" "pinyin" "reformed" "searchjl" "stroke" "trad" "unihan" "zhuyin" など。(参考リンク) |
language-region-u-kn-(値) | Boolean | numeric プロパティと同等。 |
language-region-u-kf-(値) | String | caseFirst プロパティと同等。 |
例えば、言語コードが "ja-JP" の場合、"ja-JP-u-kn-true" と記述できます。
例えば、言語コードが "de-DE" の場合、"de-DE-u-co-phonebk" と記述できます。
第03引数で、同じ設定が存在する場合、第02引数の設定は無視されます。
■第03引数(オプション)
オブジェクトを作成して、以下のプロパティと値を追加します。
プロパティ名 | 型 | 説明 |
localeMatcher | String | "best fit" … デフォルト値。指定した言語コードのアルゴリズムを優先的に試みる。 "lookup" …「BCP 47」の検索アルゴリズムを利用する。 |
usage | String | "sort" … デフォルト値。ソート処理を行うために比較している場合に指定する? "search" … 検索処理を行うために比較している場合に指定する? |
sensitivity | String | "variant" … ( a != á ) ( a != A ) デフォルト値。 "case" … ( a == á ) ( a != A ) 「英字とアクセント符号」を同一とする。 "accent" … ( a != á ) ( a == A ) 「大文字と小文字」を同一とする。 "base" … ( a == á ) ( a == A ) 「英字とアクセント符号」、「大文字と小文字」を同一とする。 |
ignorePunctuation | Boolean | false … デフォルト値。 true … 句読点を無視したい場合に指定する。 |
numeric | Boolean | false … デフォルト値。 true … 連番となる部分を、数値として比較したい場合に指定する。 |
caseFirst | String | "false" … デフォルト値。 "upper" … 動作しない。小文字の前に大文字を並び替える? "lower" … 動作しない。大文字の前に小文字を並び替える? |
■使用例
文字列同士を比較する
// 文字列を作成
var str0 = "あああああ";
var str1 = "ああああい";
// 文字列同士を比較する
var result = str0.localeCompare(str1);
// 出力テスト
console.log(result); // -1
言語コードを指定して、文字列同士を比較する
// 言語コードを指定して、文字列同士を比較する
var result0 = "abc".localeCompare( "abc" , "ja-JP" );
var result1 = "abc".localeCompare( "abc" , "en-US" );
// 出力テスト
console.log(result0); // 0
console.log(result1); // -1
連番を考慮して、配列内をソートする
// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 配列を作成
var ary = ["Ba","A64","B10","B2","A123","A0","A"];
// ロケール
var locales = "en";
// オプション
var options = {
// 特定の文字を同一視する感度設定
sensitivity:"variant",
// 句読点を無視したいか
ignorePunctuation:false,
// 連番となる部分を、数値として比較するか
numeric:true
};
// ------------------------------------------------------------
// 配列をソートする
// ------------------------------------------------------------
var i;
var j;
var num = ary.length;
for(i=0;i < num-1;i++){
for(j=i+1;j < num;j++){
if(ary[i].localeCompare(ary[j],locales,options) > 0){
var t = ary[i];
ary[i] = ary[j];
ary[j] = t;
}
}
}
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(ary); // ["A", "A0", "A64", "A123", "B2", "B10", "Ba"]
■大文字を小文字に変換した結果を取得する
toLowerCase() メソッドを使用します。
■使用例
大文字を小文字に変換する
// 文字列を作成
var str0 = "AbCdEfG";
// 大文字を小文字に変換する
var str1 = str0.toLowerCase();
// 出力テスト
console.log(str1); // "abcdefg"
■小文字を大文字に変換した結果を取得する
toUpperCase() メソッドを使用します。
■使用例
小文字を大文字に変換する
// 文字列を作成
var str0 = "AbCdEfG";
// 小文字を大文字に変換する
var str1 = str0.toUpperCase();
// 出力テスト
console.log(str1); // "ABCDEFG"
■大文字を小文字に変換した結果を取得する(実行環境のロケールを考慮)
■使用例
大文字を小文字に変換する
// 文字列を作成
var str0 = "AbCdEfG";
// 大文字を小文字に変換する(実行環境のロケールを考慮)
var str1 = str0.toLocaleLowerCase();
// 出力テスト
console.log(str1); // "abcdefg"
■小文字を大文字に変換した結果を取得する(実行環境のロケールを考慮)
■使用例
小文字を大文字に変換する
// 文字列を作成
var str0 = "AbCdEfG";
// 小文字を大文字に変換する(実行環境のロケールを考慮)
var str1 = str0.toLocaleUpperCase();
// 出力テスト
console.log(str1); // "ABCDEFG"
■連続する「空白,タブ,改行」を除去した結果を取得する(最先頭と最後尾のみ)
trim() メソッドを使用します。
最先頭と最後尾のみ、除去します。
このメソッドは、一部のブラウザでのみ動作します。
■使用例
連続する「空白、タブ、改行」を除去する(最先頭と最後尾のみ)
// 文字列を作成
var str0 = " \t\n |あいうえお| \t\n";
// 連続する「空白、タブ、改行」を除去(最先頭と最後尾のみ)
var str1 = str0.trim();
// 出力テスト
console.log(str1); // "|あいうえお|"
■連続する「空白,タブ,改行」を除去した結果を取得する。(最先頭のみ)
trimLeft() メソッドを使用します。
最先頭のみ、除去します。
このメソッドは、一部のブラウザでのみ動作します。
■使用例
連続する「空白、タブ、改行」を除去する(最先頭のみ)
// 文字列を作成
var str0 = " \t\n |あいうえお|";
// 連続する「空白、タブ、改行」を除去(最先頭のみ)
var str1 = str0.trimLeft();
// 出力テスト
console.log(str1); // "|あいうえお|"
■連続する「空白,タブ,改行」を除去した結果を取得する。(最後尾のみ)
trimRight() メソッドを使用します。
最後尾のみ、除去します。
このメソッドは、一部のブラウザでのみ動作します。
■使用例
連続する「空白、タブ、改行」を除去する(最後尾のみ)
// 文字列を作成
var str0 = " \t\n |あいうえお|";
// 連続する「空白、タブ、改行」を除去(最後尾のみ)
var str1 = str0.trimRight();
// 出力テスト
console.log(str1); // "|あいうえお|"
■指定したワードで文字列を分割し、結果を配列で取得する
split() メソッドを使用します。
このメソッドは、正規表現に対応しています。
String.split( 検索ワード , 分割制限 ) :Array
第01引数(略可) | * | 検索ワードを指定。「文字列」や「正規表現オブジェクト」の指定が可能。空文字を指定した場合、1文字つずつ分割される。 |
第02引数(略可) | Number | 分割を試みる回数の上限値を指定する。省略した場合、文字列の最後尾まで試みる。 |
戻り値 | Array | 新しい配列が得られる。ワードが見つからなかった場合、0 番目に元の文字列がそのまま格納されている。 |
■第01引数 (文字列を指定した場合)
通常の文字列検索が行われます。
■第01引数 (正規表現オブジェクトを指定した場合)
正規表現検索が行われます。
第01引数で RegExp オブジェクトを指定した場合、中身は変化しません。
■使用例
指定したワードで文字列を分割し、結果を配列で取得する
// 文字列を作成
var str = "あ=いい=ううう=ええ=お";
// 文字列を分割し、配列を取得する
var ary = str.split("=");
// 出力テスト
console.log(ary); // [ "あ" , "いい" , "ううう" , "ええ" , "お" ]
指定したワードで文字列を、最大で2回まで分割し、結果を配列で取得する
// 文字列を作成
var str = "AAAandBBandCCCandDandEEE";
// 文字列を最大で2回まで分割し、配列を取得する
var ary = str.split("and" , 2);
// 出力テスト
console.log(ary); // [ "AAA" , "BB" ]
正規表現を使って、文字列を分割し、結果を配列で取得する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "AAA--BB----CCC--D--------EEE";
// ------------------------------------------------------------
// 正規表現オブジェクトを作成
// ------------------------------------------------------------
var re = new RegExp("[-]+","");
// ------------------------------------------------------------
// 文字列を分割し、配列を取得する
// ------------------------------------------------------------
var ary = str.split(re);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(ary); // [ "AAA" , "BB" , "CCC" , "D" , "EEE" ]
■文字列内を検索し、正規表現マッチした位置を取得する
search() メソッドを使用します。
このメソッドは、必ず正規表現で動作します。
match() メソッドよりも高速で動作します。
String.search( 検索ワード ) :Number
第01引数(略可) | * | 検索ワードを指定。「正規表現の構文」か「正規表現オブジェクト」を指定 |
戻り値 | Number | 正規表現がマッチする場合、開始位置が得られる。正規表現がマッチしなかった場合、-1 が得られる。 |
第01引数(検索ワード)
引数に文字列を指定しても、正規表現の構文として解釈されます。
通常の文字列検索としては動作しないので注意してください。
第01引数で RegExp オブジェクトを指定した場合、中身は変化しません。
■使用例
検索ワードとマッチする位置を取得する
// 文字列を作成
var str = "あいうえおかきくけこさしすせそ";
// マッチする位置を取得する
var index = str.search("かきくけこ");
// 出力テスト
console.log(index); // 5
正規表現とマッチする位置を取得する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "あいうえおかきくけこさしすせそ";
// ------------------------------------------------------------
// 正規表現オブジェクトを作成
// ------------------------------------------------------------
var re = new RegExp("(か)(.+)(こ)","");
// ------------------------------------------------------------
// 正規表現とマッチする位置を取得する
// ------------------------------------------------------------
var index = str.search(re);
// マッチした
if(index >= 0){
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(index); // 5
}
■文字列の途中から調べるには?
文字列の途中から調べる事はできません。
途中から調べたい場合、RegExp クラスのメソッドを使用します。
■文字列内を検索し、正規表現マッチした詳細な結果を取得する
match() メソッドを使用します。
このメソッドは、必ず正規表現で動作します。
真偽結果のみを得たい場合は、search() メソッドを使用した方が、高速に動作します。
String.match( 検索ワード ) :*
第01引数(略可) | * | 検索ワードを指定。「正規表現の構文」か「正規表現オブジェクト」を指定 |
戻り値 | * | マッチする場合、オブジェクトが得られる。マッチしない場合、null が得られる。 |
第01引数(検索ワード)
引数に文字列を指定しても、正規表現の構文として解釈されます。
通常の文字列検索としては動作しないので注意してください。
第01引数で RegExp オブジェクトを指定した場合、中身は変化しません。
■戻り値 (繰り返しフラグ "g" の指定が無い場合)
マッチしなかった場合、null が得られます。
マッチする場合、オブジェクトが得られます。
オブジェクトは、配列のように中身を取り出す事ができます。
0 番目には、マッチした全体の文字列が格納されています。
1 番目以降には、マッチした丸括弧 () 内の文字列が、順番に格納されています。
その他には、以下のプロパティが存在します。
プロパティ | 型 | 説明 |
index | Number | 正規表現とマッチした文字列の位置。 |
input | String | マッチを試みた文字列全体。 |
正規表現とマッチした部分の文字列を取得する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "あいうえおかきくけこさしすせそ";
// ------------------------------------------------------------
// 正規表現オブジェクトを作成
// ------------------------------------------------------------
var re = new RegExp("(か)(.+)(こ)","");
// ------------------------------------------------------------
// 正規表現とマッチした部分の文字列を取得する
// ------------------------------------------------------------
var m = str.match(re);
// マッチした
if(m){
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
// 全体マッチ
console.log(m[0]); // "かきくけこ"
// 丸括弧内のマッチ
console.log(m[1]); // "か"
console.log(m[2]); // "きくけ"
console.log(m[3]); // "こ"
// その他のプロパティ
console.log(m.input); // "あいうえおかきくけこさしすせそ"
console.log(m.index); // 5
}
■戻り値 (繰り返しフラグ "g" の指定がある場合)
マッチしなかった場合、null が得られます。
マッチする場合、配列が得られます。
繰り返しマッチした回数だけ、配列の要素数が増えます。
配列の中には、 0 番目から順番に、マッチした部分の文字列が格納されています。
正規表現の、丸括弧 () 内とマッチした結果を、取得する事はできません。
繰り返しフラグが存在する場合の動作を確認する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str = "あいうえおかきくけこさしすせそ";
// ------------------------------------------------------------
// 正規表現オブジェクトを作成
// ------------------------------------------------------------
var re = new RegExp("[あ-ん]{5}","g");
// ------------------------------------------------------------
// 正規表現とマッチした部分の文字列を取得する
// ------------------------------------------------------------
var m = str.match(re);
// マッチした
if(m){
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
// マッチ総数
console.log(m.length); // 3
// 1回目の全体マッチ
console.log(m[0]); // "あいうえお"
// 2回目の全体マッチ
console.log(m[1]); // "かきくけこ"
// 3回目の全体マッチ
console.log(m[2]); // "さしすせそ"
}
■文字列を置換した結果を、新しい文字列として取得する
replace() メソッドを使用します。
このメソッドは、正規表現に対応しています。
String.replace( 検索 , 置換 ) :String
第01引数(略可) | * | 検索文字列を指定する。「文字列」もしくは「正規表現オブジェクト」の指定が可能。 |
第02引数(略可) | * | 置換文字列を指定する。「文字列」もしくは「コールバック関数」の指定が可能。 |
戻り値 | String | 置換後の結果を、新しい文字列として得られる。 |
■第01引数 (文字列を指定した場合)
通常の文字列検索が行われます。
マッチした場合、一度だけ置換されます。
文字列を検索し、置換した結果を取得する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str0 = "あい▲▲▲えお";
// ------------------------------------------------------------
// "▲▲▲" を "う" に置換する
// ------------------------------------------------------------
var str1 = str0.replace("▲▲▲","う");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(str1); // "あいうえお"
■第01引数 (正規表現オブジェクトを指定した場合)
正規表現検索が行われます。
正規表現には、丸括弧 () を含める事ができます。
検索と置換を、最後まで繰り返したい場合は、"g" フラグを追加します。
正規表現オブジェクトを作成(繰り返しフラグ付き)
// 正規表現オブジェクトを作成(繰り返しフラグ付き)
var re = new RegExp("(.)","g");
■第02引数 (文字列を指定した場合)
第02引数に、文字列型を指定した場合の動作です。
第01引数に正規表現オブジェクトを指定した場合、以下のドルエスケープ文字の記述が可能です。
エスケープ文字 | 説明 |
$$ | $ 文字の代替。 |
$1 ~ $99 | n 番目の丸括弧とマッチした文字列を展開する。 |
$& (U+0026) | マッチした文字列全体を展開する。 |
$` (U+0060) | 最先頭から、マッチした直前までの文字列を展開する。 |
$' (U+0027) | マッチした直後から、最後尾までの文字列を展開する。 |
ドルエスケープ文字の展開を確認する
// 文字列を作成
var str0 = "あいうえおかき";
// 正規表現オブジェクトを作成
var re = new RegExp("(う)(え)(お)","");
// 文字列を置換する
var str1 = str0.replace(re,"| left:$` match:$& p1:$1 p2:$2 p3:$3 right:$' |");
// 出力テスト
console.log(str1); // "...| left:あい match:うえお p1:う p2:え p3:お right:かき |..."
■第02引数 (コールバック関数を指定した場合)
第02引数に、関数型を指定した場合の動作です。
コールバック関数の仕様は、以下の通りです。
第01引数から、マッチした全体の文字列が得られます。
第02引数以降は、可変引数となります。
正規表現内の、丸括弧 () とマッチした文字列が、順番に得られます。
丸括弧の数だけ、引数を用意する必要があります。
(最終引数 - 1)から、マッチした文字列の位置が得られます。
最終引数から、文字列全体が得られます。
戻り値からは、置換後の文字列を返します。
正規表現オブジェクトに、繰り返しフラグ "g" の指定がある場合、コールバック関数は、繰り返し呼び出されます。
■使用例
正規表現オブジェクトを使って、繰り返し検索しすべて置換する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str0 = "□●●□□●●●□";
// ------------------------------------------------------------
// 正規表現オブジェクトを作成(繰り返しフラグ付き)
// ------------------------------------------------------------
var re = new RegExp("□","g");
// ------------------------------------------------------------
// "□" を "■" に置換する(文字列指定)
// ------------------------------------------------------------
var str1 = str0.replace(re,"■");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(str1); // "■●●■■●●●■"
// ------------------------------------------------------------
// "□" を "■" に置換する(コールバック関数指定)
// ------------------------------------------------------------
var str2 = str0.replace(re,function (m,index,str){
// 出力テスト
console.log("index:" + index);
// 置換する文字列を返す
return "■";
});
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(str2); // "■●●■■●●●■"
丸括弧の展開動作を確認する
// ------------------------------------------------------------
// 文字列を作成
// ------------------------------------------------------------
var str0 = "★★★http://sub.example.com/aaa/bbb/ccc.html★★★";
// ------------------------------------------------------------
// 正規表現オブジェクトを作成
// ------------------------------------------------------------
var re = new RegExp("([a-z]*:)[/]*([^/]+)/([^?#]*)","");
// ------------------------------------------------------------
// ドルエスケープ文字を使って、丸括弧内を展開する
// ------------------------------------------------------------
var str1 = str0.replace(re,"「$1」「$2」「$3」");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(str1); // "★★★「http:」「sub.example.com」「aaa/bbb/ccc.html」★★★"
// ------------------------------------------------------------
// コールバック関数を使って、丸括弧内を展開する
// ------------------------------------------------------------
var str2 = str0.replace(re,function (m,p1,p2,p3,index,str){
// 出力テスト
console.dir(arguments);
// 置換する文字列を返す
return "「" + p1 + "」「" + p2 + "」「" + p3 + "」";
});
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(str2); // "★★★「http:」「sub.example.com」「aaa/bbb/ccc.html」★★★"
置換機能を使わずに、繰り返し検索として活用する
// ------------------------------------------------------------
// HTML 文字列を作成
// ------------------------------------------------------------
var text_html =
'<html>\n' +
' <body>\n' +
' <img src="http://sub.example.com/graphics/aaa.jpg">\n' +
' <img src="http://sub.example.com/graphics/bbb.jpg">\n' +
' <img src="http://sub.example.com/graphics/ccc.jpg">\n' +
' </body>\n' +
'</html>';
// ------------------------------------------------------------
// 正規表現オブジェクトを作成(繰り返しフラグ付き)
// ------------------------------------------------------------
var re = new RegExp('<img[ \t\r\n]+[^>]*src[ \t\r\n]*=[ \t\r\n]*"([^"]+)"',"g");
// ------------------------------------------------------------
// 繰り返し検索(置換機能を無視)
// ------------------------------------------------------------
text_html.replace(re,function (m,p1,index,str){
// 出力テスト
console.dir(arguments);
console.log("index:" + index);
console.log("p1:" + p1);
console.log(" --- ");
});
■ HTML 文字列を生成する
これらのメソッドは、JavaScript 1.0 時代に用意されたものであり、今後利用する事は無いでしょう。
String.anchor( "name 属性の値" ) :String
第01引数(略可) | String | name 属性の値を指定。 |
戻り値 | String | HTML 文字列を生成する。 <a name="[引数]">[元の文字列]</a> |
String.link( "href 属性の値" ) :String
第01引数(略可) | String | href 属性の値を指定。 |
戻り値 | String | HTML 文字列を生成する。 <a href="[引数]">[元の文字列]</a> |
String.fontcolor( "color 属性の値" ) :String
第01引数(略可) | String | color 属性の値を指定。 |
戻り値 | String | HTML 文字列を生成する。 <font color="[引数]">[元の文字列]</font> |
String.fontsize( "size 属性の値" ) :String
第01引数(略可) | String | size 属性の値を指定。 |
戻り値 | String | HTML 文字列を生成する。 <font size="[引数]">[元の文字列]</font> |
■使用例
HTML 文字列を生成する
// 文字列を作成
var str = "あいうえお";
// '<a name="FRAGMENT_IDENTIFIER">あいうえお</a>'
document.write( str.anchor("FRAGMENT_IDENTIFIER") );
// '<a href="http://example.com/">あいうえお</a>'
document.write( str.link("http://example.com/") );
// '<small>あいうえお</small>'
document.write( str.small() );
// '<big>あいうえお</big>'
document.write( str.big() );
// '<b>あいうえお</b>'
document.write( str.bold() );
// '<i>あいうえお</i>'
document.write( str.italics() );
// '<font color="#ff8800">あいうえお</font>'
document.write( str.fontcolor("#ff8800") );
// '<font size="32">あいうえお</font>'
document.write( str.fontsize("32") );
// '<blink>あいうえお</blink>'
document.write( str.blink() );
// '<strike>あいうえお</strike>'
document.write( str.strike() );
// '<sub>あいうえお</sub>'
document.write( str.sub() );
// '<sup>あいうえお</sup>'
document.write( str.sup() );
// '<tt>あいうえお</tt>'
document.write( str.fixed() );
数値型から文字列に変換する
■String() 関数を使用する
任意のデータを、文字列に変換するには、String() 関数を使用します。
String ( * ) :String
第01引数(略可) | * | 任意のデータを指定。 |
戻り値 | String | 文字列に変換した結果が得られる |
String() 関数を使って、文字列型に変換する
// 数値を作成する
var value = 123.456;
// 文字列に変換する
var str = String(value);
// 出力テスト
console.log(str); // "123.456"
console.log(typeof(str)); // "string"
■連結演算子を使って、空文字列を連結する
任意のデータを、空文字列と連結すると、文字列に変換する事ができます。
空文字と連結して、文字列に変換する
// 数値を作成する
var value = 123.456;
// 空文字と連結して、文字列に変換する
var str = "" + value;
// 出力テスト
console.log(str); // "123.456"
console.log(typeof(str)); // "string"
文字列リテラルのエスケープについて
■文字列リテラルのエスケープについて
■エスケープ文字について
変換すべき、エスケープシーケンスの一覧です。
表記 | Unicode | 説明 |
\\ | U+005C | バックスラッシュ(円記号) |
\b | U+0008 | バックスペース |
\f | U+000C | フォームフィード |
\n | U+000A | ラインフィード(改行コード) |
\r | U+000D | キャリッジ・リターン(改行コード) |
\t | U+0009 | 水平タブ |
\v | U+000B | 垂直タブ |
\' | U+0027 | シングルクォーテーション |
\" | U+0022 | ダブルクォーテーション |
\/ | U+002F | スラッシュ |
エスケープ文字を含めた文字列を作成する
var str = "\tあいうえお\n\tかきくけこ";
■JavaScript 特有の問題について
文字列リテラル内で、閉じタグが出現しないように注意して下さい。
例えば、以下の様な HTML 文書は、誤解釈されます。
文字列リテラル内で、閉じタグが出現すると誤解釈される
<html>
<body>
<script type="text/javascript">
<!--
var str = "あいうえお</script>かきくけこ";
//-->
</script>
</body>
</html>
スラッシュを \/ と記述して、回避するといいでしょう。
■ Unicodeスカラ値について
\uFFFF と記述すると、Unicode 1文字分を表現できます。
FFFF の部分には、ユニコードを 16 進数で表記します。
サロゲートペアとなるコードは、2つに分けて表記します。
例えば、U+10FFFF 文字は、\uD83F\uDFFF と表記します。
Unicodeスカラ値を含めた文字列を作成する
var str = "\u3042 \u3044 \u3046 \u3048 \u304a";
■ Hexスカラ値について
\xFF と記述すると、0 ~ 255 までの1文字分を表現できます。
FF の部分には、0 ~ 255 までの値を、16 進数で表記します。
Hexスカラ値を含めた文字列を作成する
var str = "\x41 \x44 \x47 \x4a \x4c";