JavaScriptでは、文字列をダブルクォーテーション（"）またはシングルクォーテーション（'）で囲んで表現します。
xx = "ABCDEFG"; yy = 'ABCDEFG';
文字列の中では、バックスラッシュ（\）に続く 1 文字は特別な意味を持ちます。これらの文字をエスケープ文字と呼びます。
| 文字 | 説明 |
|---|---|
| \n | ニューライン（改行文字） |
| \f | フォームフィード |
| \b | バックスペース |
| \r | キャリッジリターン（復帰文字） |
| \t | タブ文字 |
| \' | シングルクォート（'） |
| \" | ダブルクォート（"） |
| \\ | バックスラッシュ（\） |
| \nnn | 8進数による文字コード指定（例えば "A" は "\101"） |
| \xnn | 16進数による文字コード指定（例えば "A" は "\x41"） |
| \unnnn | Unicode文字（例えば "あ" は "\u3042"） |
| \u{nnnnnn} | サロゲートペアを含むUnicode文字 (例: \u{20B9F}) |
例えば、alert() によるダイアログ中でメッセージを改行するには、次のようにします。
alert("ざんねんでした。\nまたきてね。");
ダブルクォート（"）の中でダブルクォート（"）を使用することはできません。シングルクォート（'）の中のシングルクォート（'）も同様です。
str = "ダブルクォートは " です。"; // error!! str = 'シングルクォートは ' です。'; // error!!
どうしても使用したい場合は、"..." の中でシングルクォート（'）を使うか、'...' の中でダブルクォート（"）を使うか、\" や \' を使います。
str = "シングルクォートは ' です。"; str = 'ダブルクォートは " です。'; str = "ダブルクォート \" で、シングルクォートは \' です。";
ES6(2015) では、文字列の中で変数を展開可能なテンプレート文字列がサポートされました。ダブルクォート(")、シングルクォート(')の代わりにバッククォート(`) を使用します。
var name = "Yamada";
var str = `ようこそ ${name} さん`;
console.log(str); // ようこそ Yamada さん
${ ... } の間には JavaScript 構文を記述することが可能です。
var a = 3;
var b = 5;
var str = `Answer is ${ a + b }`; // Answer is 8
タグ付きのテンプレート文字列では、タグに対応する関数が呼ばれます。第一引数には文字列の配列が、残りの引数には ${...} に指定したパラメータが渡されます。
function tag(strings, ...values) {
var str = "";
for (var i = 0; i < strings.length - 1; i++) {
str += (strings[i] + values[i]);
}
str += strings[i];
return str;
};
var width = '30px';
var height = '40px';
var str = tag`Heightは ${height} Widthは ${width} です`;
console.log(str); // "Heightは 30px Widthは 40px です"
テンプレート文字列内に、LaTeX などで使用される "\unicode" など、\u や \x などの特殊文字が含まれているとシンタックスエラーとなっていましたが、ES2018(ES9) では、タグ付きテンプレート文字列でのみ、strings.raw で元の文字列を参照できるようになりました。
function tag(strings, ...values) {
var str = "";
for (var i = 0; i < strings.length - 1; i++) {
str += (strings.raw[i] + values[i]);
}
str += strings.raw[i];
return str;
};
var width = '30px';
var height = '40px';
var str = tag`\unicode Heightは ${height} Widthは ${width} です`;
console.log(str); // "\unicode Heightは 30px Widthは 40px です"
"..." や '...' や `...` では、行末にバックスラッシュ(\)を記載することでマルチラインの文字列を記述できます。
str = "ERROR: 404\n\
File not found."; // "ERROR: 404\nFile not found."
`...` ではバックスラッシュを省略した場合、改行コードで連結されます。
str = `ERROR: 404
File not found.`; // "ERROR: 404\nFile not found."
文字列オブジェクトを生成します。ビルトイン関数の String() とは別物です。「すべての型をオブジェクトタイプとして実装する」というポリシーで用意されていますが、あまり使用されることはありません。
xx = new String("ABC");
value を文字列に変換します。
var str = String(123);
文字列の長さを求めます。初期のブラウザでは日本語1文字を2と数えるものもありましたが、通常は言語に関わらず、1文字を1と数えます。ただし、サロゲートペア領域の文字に対しては、1文字を 2と数えます。
str = "あいうえお";
console.log(str.length); // => 5
サロゲートペア領域文字も1文字として数えるには次のようにします。
function strLength(str) {
return str.length - str.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g).length + 1;
}
console.log(strLength("𠮷野家の𩸽定食")); // => 7
ES2018(ES9) 以降のブラウザでは スプレッド構文 を用いて [...string].length によりサロゲートペアを含む文字数をカウントすることができます。
console.log("𠮷野家の𩸽定食".length); // 9
console.log([..."𠮷野家の𩸽定食"].length); // 7
string の n 番目（最初の文字を0番目とする）の文字を返します。
str = "あいうえお";
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i)); // => あ い う え お
}
string の from～to - 1 文字目（最初の文字を 0 番とする）の文字列を返します。負の値を指定すると 0 番目と見なされます。to を省略すると残りのすべてを返します。
"ABCDEFG".substring(2, 4); // => "CD"
string の from～to - 1 文字目（最初の文字を 0 番目とする）の文字列を返します。負の値を指定すると後ろから数える点が substring() と異なります。to を省略すると残りのすべてを返します。
"ABCDEFG".slice(2, 4); // => "CD" "ABCDEFG".slice(2); // => "CDEFG"
string の from 番目から len 文字分（最初の文字を 0 番目とする）の文字列を返します。from に負の値を指定すると後ろから数えます（IE6は未対応）。len を省略すると残りのすべてを返します。
"ABCDEFG".substr(2, 4); // => "CDEF"
string の前後のホワイトスペースを取り除いた文字列を返します。ES5.1 で追加されたもので、Chrome, Firefox, Safari, Edge, IE9 以降で使用可能です。
" ABC ".trim(); // => "ABC"
ES2019(ES10) で追加された機能で、trimStart() は文字列の前方の、trimEnd() は文字列の後方のホワイトスペースを取り除いた文字列を帰ります。
" ABC ".trimStart(); // => "ABC " " ABC ".trimEnd(); // => " ABC"
string を sep を区切り文字として分割し、その配列を返します。limit は配列の個数を制限します。sep を省略すると string 全体を唯一の要素とする配列を返します。
a = "23:59:59".split(":");
console.log(a[0] + "時" + a[1] + "分" + a[2] + "秒"); // => "23時59分59秒"
string に str2, str3, ... を連結した文字列を返します。
"ABC".concat("DEF", "EFG"); // => "ABCDEFG"
string を n 回繰り返した文字列を返します。IE11 ではサポートされていません。
"ABC".repeat(3); // => "ABCABCABC"
string の内、regexp で指定した文字列や 正規表現 にマッチする部分文字列を newString に置き換えたものを返します。
"This is a pen.".replace("pen", "book"); // => "This is a book."
newString では、$ で始まる特殊文字を使用することができます。$& はマッチした文字列全体、$1～$100 は正規表現中の (...) に対応する部分文字列、$` はマッチ部分より前の文字列、$' はマッチ部分より後ろの文字列、$$ は $ 自身を示します。
console.log("[23:59:59]".replace(/(\d+):(\d+):(\d+)/, "$1時$2分$3秒")); // => "[23時59分59秒]"
// $& => "23:59:59"、$1 => "23"、$2 => "59"、$3 => "59"
// $` => "["、$' => "]"、$$ => "$"
JavaScript 1.3 以降では newString の部分に関数を指定することができます。match は $&、p1～p3 は $1～$3、offset はマッチした文字列の位置(0開始)、str は元の文字列全体を示します。
xx = "[23:59:59]".replace(/(\d+):(\d+):(\d+)/, function(match, p1, p2, p3, offset, str) {
console.log(match); // => "23:59:59"
console.log(p1); // => "23"
console.log(p2); // => "59"
console.log(p3); // => "59"
console.log(offset); // => 1
console.log(str); // => "[23:59:59]"
return(p1 + "時" + p2 + "分" + p3 + "秒"); // => "23時59分59秒"
});
console.log(xx); // => "[23時59分59秒]"
ES2021 追加されました。replace() は正規表現の /.../g を指定しないと最初にマッチしたものしか置換しませんが、replaceAll() は見つかったものすべての置換します。正規表現は指定できません。
"AAA".replace("A", "X") # => XAA
"AAA".replace(/A/, "X") # => XAA
"AAA".replace(/A/g, "X") # => XXX (全置換)
"AAA".replaceAll("A", "X") # => XXX (全置換)
string を大文字・小文字に変換した文字列を返します。
"Abc".toUpperCase(); // => "ABC" "Abc".toLowerCase(); // => "abc"
string の from 番目（最初の文字を0番目とする）から後方に検索し、最初に key が現れる位置（string の最初の文字を0番目とする）を、見つからない場合は -1 を返します。
"ABCABC".indexOf("C"); // => 2
"ABCABC".indexOf("C", 3); // => 5
string の from 番目（最初の文字を0番目とする）から前方に、最初に key が現れる位置（string の最初の文字を0番目とする）を、見つからない場合は -1 を返します。
fileName = "xxx.gif";
if ((n = fileName.lastIndexOf(".")) != -1) {
ext = fileName.substring(n);
}
string の中に str を含んでいるか否かを判断します。startsWith() は str で始まっていれば、endsWith() は str で終わっていれば、includes() は str を含んでいれば true を、さもなくば false を返します。IE11 ではサポートされていません。
"ABCDEFG".startsWith("ABC"); // => true
"ABCDEFG".endsWith("EFG"); // => true
"ABCDEFG".includes("DEF"); // => true
正規表現 regexp に最初にマッチした部分の文字列を返します。マッチしなかった時は null 値を返します。
if ("ABCDEFG".match(/def/i)) {
console.log("Match");
}
string から 正規表現 regexp にマッチする部分の位置を返します。見つからなければ -1 を返します。
if ("ABCDEFG".search(/def/i) != -1) {
console.log("Match");
}
string の n 番目（最初の文字を0番目とする）の文字の、UTF-16 における文字コードを返します。サロゲートペアには対応していません。
str = "日本語";
for (var i = 0; i < str.length; i++) {
console.log(str.charCodeAt(i).toString(16)); // => 65e5 672c 8a9e
}
string の n 番目（最初の文字を0番目とする）の文字の、UTF-16 における文字コードを返します。サロゲートペアに対応しています。Chrome, Firefox, Safari, Edge ではサポートされていますが、IE11 ではサポートされていません。
str = "𠮟る";
for (var i = 0; i < str.length; i++) {
console.log(str.codePointAt(i).toString(16)); // => 20b9f 308b
var ch = str.charCodeAt(i);
if ((0xd800 <= ch) && (ch <= 0xdbff)) { // サロゲートの場合は1文字読み飛ばす
i++;
}
}
文字コード num1, ..., numN で表される文字列を返します。サロゲートペアには対応していません。
String.fromCharCode(0x41, 0x42, 0x43); // => "ABC" String.fromCharCode(0x65e5, 0x672c, 0x8a9e); // => "日本語"
UTF-16 における文字コード num1, ..., numN で表される文字列を返します。サロゲートペアに対応しています。IE11 ではサポートされていません。
String.fromCodePoint(0x20b9f, 0x308b); // => "𠮟る"
string を <b>、<i>、<tt>、<big>、<small>、<blink>、<strike>、<sup>、<sub>、<font color="color">、<font size="size">、<a name="name">、<a href="name"> の開始タグ、終了タグで囲んだ文字列を返します。
"ABC".bold(); // => <b>ABC</b> "ABC".italics(); // => <i>ABC</i> "ABC".fixed(); // => <tt>ABC</tt> "ABC".big(); // => <big>ABC</big> "ABC".small(); // => <small>ABC</small> "ABC".blink(); // => <blink>ABC</blink> "ABC".strike(); // => <strike>ABC</strike> "ABC".sup(); // => <sup>ABC</sup> "ABC".sub(); // => <sub>ABC</sub> "ABC".fontcolor("red"); // => <font color="red">ABC</font> "ABC".fontsize(7); // => <font size="7">ABC</font> "ABC".anchor("xxx"); // => <a name="xxx">ABC</a> "ABC".link("index.html"); // => <a href="index.html">ABC</a>
padStart() は文字列の前方に、padEnd() は文字列の後方にパディングを行います。length はパディング後の長さ、string はパディングする文字を指定します。string が length よりも長い時は何も行いません。str を省略すると半角スペースでパディングします。
str = "123"; console.log(str.padStart(5, "0")); // "00123" console.log(str.padEnd(5, "_")); // "123__"
ES2017(ES8) で追加された機能で、ES5 からは、JSON 文字列と JavaScript オブジェクトを相互変換する機能が追加されました。ES5 で定義され、Chrome, Firefox, Safari, Edge, IE8 で利用可能です。
var str = '{"width":160, "height":120}';
var obj = JSON.parse(str);
console.log(obj); // {width: 160, height: 120}
var str2 = JSON.stringify(obj); // {"width":160,"height":120}
Unicodeでは、世界中の文字を基本的に、BMP(Basic Multilingual Plane:基本多言語面) と呼ばれる U+0000～U+FFFF までの 65535文字の空間で表現することを試みていました。Shift_JIS には存在しない「髙(はしごだか:U+9AD9)」や「鷗(森鴎外の難しい方の漢字:U+9DD7)」も BMP に含まれます。しかし、BMP の範囲では収まりきらなくなったため、16面増やし、U+10000～U+10FFFF までの範囲を拡張しました。「𠮟(叱の異体文字:U+20B9F)」や「🍔(ハンバーガーの絵文字:U+1F354)」などがこれにあたります。しかし、UTF-16 では U+0000～U+FFFF までの文字しか表現することができないため、拡張分の文字は、上位サロゲート(U+D800～U+DBFF)＋下位サロゲート(U+DC00～U+DFFF)の 2文字を組み合わせて表現します。これを「サロゲートペア」と呼びます。
最近のブラウザは概ねサロゲートペアに対応しているものの、文字の長さを数える際は、サロゲートペア領域の文字を2文字とカウントするので注意が必要です。下記では、サロゲートペア領域の文字を 2文字として配列にしたり、1文字として配列にしたり、1文字とした場合の文字数をカウントしています。
function func(str) {
var arr1 = []; // サロゲートペアを1文字として扱う
var arr2 = []; // サロゲートペアを2文字として扱う
var length = 0;
for (var i = 0; i < str.length; i++) {
var ch = str.charCodeAt(i);
arr2.push(ch);
if ((ch < 0xdc00) || (0xdfff < ch)) { // 下位サロゲートでなければ
arr1.push(str.codePointAt(i));
length++;
}
}
console.log(arr1); // => [0x68ee, 0x9dd7, 0x5916, 0x20b9f, 0x308b]
console.log(arr2); // => [0x68ee, 0x9dd7, 0x5916, 0xd842, 0xdf9f, 0x308b]
console.log(length); // => 5
}
func('森鷗外𠮟る');
Unicode文字列 string を正規化したものを返します。 form には変換形式を NFC、NFD、NFKC、NFKD のいずれか(省略時はNFC)で指定します。 合成は「か(\u304b)」と濁点文字(\u3099)からなる「が(\u304b\u3099)」を1文字の「が(\u304c)」に合成すること、 分解は「が(\u304c)」を「か(\u304b)」と濁点文字(\u3099)に分解することを言います。 正準等価とは「が(\u304b\u3099)」と「が(\u304c)」の様にコードは異なるが見栄えも意味も同じとみなすこと、 互換等価とは半角カナの「ｶ(\uff76)」と全角カナの「カ(\u30ab)」の様にコードや見栄えは異なるが同じ文字とみなすことを言います。 例えば、「㌀(\u3300)」と「アパート(\u30a2\u30d1\u30fc\u30c8)」は互換等価です。IE11 ではサポートされていません。
var str1 = '\u304b\u3099'; // が(\u304b\u3099) // NFC(正規化形式C): 正準等価性に基づく分解後、正準等価性に基づいて再度合成 str1.normalize('NFC'); // => が(\u304c) // NFD(正規化形式D): 正準等価性に基づく分解 str1.normalize('NFD'); // => が(\u304b\u3099) var str2 = 'ｶﾞ'; // => ｶﾞ(\uff76\uff9e) // NFKC(正規化形式KC): 互換等価性に基づく分解後、正準等価性に基づいて再度合成 str2.normalize('NFKC'); // => が(\u304c) // NFKD(正規化形式KD): 互換等価性に基づく分解 str2.normalize('NFKD'); // => が(\u304b\u3099)