文字列(String)

[up] [prev] [next]

一覧

anchor(), big(), blink(), bold(), charAt(), charCodeAt(), codePointAt(), concat(), endsWith(), fixed(), fontcolor(), fontsize(), fromCharCode(), fromCodePoint(), includes(), indexOf(), italics(), JSON.parse(), JSON.stringify(), lastIndexOf(), length, link(), match(), normalize(), repeat(), replace(), search(), slice(), small(), split(), startsWith(), strike(), String(), sub(), substr(), substring(), sup(), toLowerCase(), toUpperCase(), trim()

文字列

JavaScriptでは、文字列をダブルクォーテーション(")またはシングルクォーテーション(')で囲んで表現します。

JavaScript
xx = "ABCDEFG";
yy = 'ABCDEFG';

エスケープ文字

文字列の中では、バックスラッシュ(\)に続く 1 文字は特別な意味を持ちます。これらの文字をエスケープ文字と呼びます。

文字説明
\nニューライン(改行文字)
\fフォームフィード
\bバックスペース
\rキャリッジリターン(復帰文字)
\tタブ文字
\'シングルクォート(')
\"ダブルクォート(")
\\バックスラッシュ(\)
\nnn8進数による文字コード指定(例えば "A" は "\101")
\xnn16進数による文字コード指定(例えば "A" は "\x41")
\unnnnUnicode文字(例えば "あ" は "\u3042")
\u{nnnnnn}サロゲートペアを含むUnicode文字 (例: \u{20B9F})

例えば、alert() によるダイアログ中でメッセージを改行するには、次のようにします。

JavaScript
alert("ざんねんでした。\nまたきてね。");

ダブルクォートとシングルクォート

ダブルクォート(")の中でダブルクォート(")を使用することはできません。シングルクォート(')の中のシングルクォート(')も同様です。

JavaScript
str = "ダブルクォートは " です。";     // error!!
str = 'シングルクォートは ' です。';   // error!!

どうしても使用したい場合は、"..." の中でシングルクォート(')を使うか、'...' の中でダブルクォート(")を使うか、\" や \' を使います。

JavaScript
str = "シングルクォートは ' です。";
str = 'ダブルクォートは " です。';
str = "ダブルクォート \" で、シングルクォートは \' です。";

テンプレート文字列

ES6(2015) では、文字列の中で変数を展開可能なテンプレート文字列がサポートされました。ダブルクォート(")、シングルクォート(')の代わりにバッククォート(`) を使用します。

JavaScript
var name = "Yamada";
var str = `ようこそ ${name} さん`;
console.log(str);  // ようこそ Yamada さん

{ ... } の間には JavaScript 構文を記述することが可能です。

JavaScript
var a = 3;
var b = 5;
var str = `Answer is ${ a + b }`;   // Answer is 8

タグ付きのテンプレート文字列では、タグに対応する関数が呼ばれます。第一引数には文字列の配列が、残りの引数には ${...} に指定したパラメータが渡されます。

JavaScript
var width = '30px';
var height = '40px';
function tag(strings, ...values) {
  console.log(strings);   // ["Heightは ", " Widthは ", " です"]
  console.log(values);    // ["30px", "40px"]
  return 'returned strings!';
};
var str1 = tag`Heightは ${height} Widthは ${width} です`;
console.log(str1);     // "returned strings!"

マルチライン

"..." や '...' や `...` では、行末にバックスラッシュ(\)を記載することでマルチラインの文字列を記述できます。

JavaScript
str = "ERROR: 404\n\
File not found.";              // "ERROR: 404\nFile not found."

`...` ではバックスラッシュを省略した場合、改行コードで連結されます。

JavaScript
str = `ERROR: 404
File not found.`;              // "ERROR: 404\nFile not found."

文字列オブジェクト

string = new String(string)

文字列オブジェクトを生成します。ビルトイン関数の String() とは別物です。「すべての型をオブジェクトタイプとして実装する」というポリシーで用意されていますが、あまり使用されることはありません。

JavaScript
xx = new String("ABC");

文字列の長さ

string.length

文字列の長さを求めます。初期のブラウザでは日本語1文字を2と数えるものもありましたが、通常は言語に関わらず、1文字を1と数えます。ただし、サロゲートペア領域の文字に対しては、1文字を 2と数えます。

JavaScript
str = "あいうえお";
console.log(str.length);           // => 5

サロゲートペア領域文字も1文字として数えるには次のようにします。

JavaScript
function strLength(str) {
  var length = 0;
  for (var i = 0; i <= str.length; i++) {
    var ch = str.charCodeAt(i);
    if ((ch < 0xdc00) || (0xdfff < ch)) {
      length++;
    }
  }
  return(length);
}

文字列の部分取り出し

string.charAt(n)

stringn 番目(最初の文字を0番目とする)の文字を返します。

JavaScript
str = "あいうえお";
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i));  // => あ い う え お
}
string.substring(from [, to])

stringfromto - 1 文字目(最初の文字を 0 番とする)の文字列を返します。負の値を指定すると 0 番目と見なされます。to を省略すると残りのすべてを返します。

JavaScript
"ABCDEFG".substring(2, 4);    // => "CD"
string.slice(from [, to])

stringfromto - 1 文字目(最初の文字を 0 番目とする)の文字列を返します。負の値を指定すると後ろから数える点が substring() と異なります。to を省略すると残りのすべてを返します。

JavaScript
"ABCDEFG".slice(2, 4);    // => "CD"
"ABCDEFG".slice(2);       // => "CDEFG"
string.substr(from [, len])

stringfrom 番目から len 文字分(最初の文字を 0 番目とする)の文字列を返します。from に負の値を指定すると後ろから数えます(IE6は未対応)。len を省略すると残りのすべてを返します。

JavaScript
"ABCDEFG".substr(2, 4);    // => "CDEF"
string.trim()

string の前後のホワイトスペースを取り除いた文字列を返します。ES5.1 で追加されたもので、Chrome, Firefox, Safari, Edge, IE9 以降で使用可能です。

JavaScript
"   ABC   ".trim();        // => "ABC"

文字列の分割と連結

string.split([sep [, limit]])

stringsep を区切り文字として分割し、その配列を返します。limit は配列の個数を制限します。sep を省略すると string 全体を唯一の要素とする配列を返します。

JavaScript
a = "23:59:59".split(":");
console.log(a[0] + "時" + a[1] + "分" + a[2] + "秒");   // => "23時59分59秒"
string.concat(str2, str3, ...)

stringstr2, str3, ... を連結した文字列を返します。

JavaScript
"ABC".concat("DEF", "EFG");         // => "ABCDEFG"
string.repeat(n)

stringn 回繰り返した文字列を返します。IE11 ではサポートされていません。

JavaScript
"ABC".repeat(3);      // => "ABCABCABC"

文字列の置換

string.replace(regexp, newString)

string の内、regexp で指定した文字列や 正規表現 にマッチする部分文字列を newString に置き換えたものを返します。

JavaScript
"This is a pen.".replace("pen", "book");     // => "This is a book."

newString では、$ で始まる特殊文字を使用することができます。$& はマッチした文字列全体、$1~$100 は正規表現中の (...) に対応する部分文字列、$` はマッチ部分より前の文字列、$' はマッチ部分より後ろの文字列、$$ は $ 自身を示します。

JavaScript
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 は $&、p1p3 は $1~$3、offset はマッチした文字列の位置(0開始)、str は元の文字列全体を示します。

JavaScript
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秒]"
string.toUpperCase()
string.toLowerCase()

string を大文字・小文字に変換した文字列を返します。

JavaScript
"Abc".toUpperCase();   // => "ABC"
"Abc".toLowerCase();   // => "abc"

文字列の検索

string.indexOf(key [, from])

stringfrom 番目(最初の文字を0番目とする)から後方に検索し、最初に key が現れる位置(string の最初の文字を0番目とする)を、見つからない場合は -1 を返します。

JavaScript
"ABCABC".indexOf("C");       // => 2
"ABCABC".indexOf("C", 3);    // => 5
string.lastIndexOf(key [, from])

stringfrom 番目(最初の文字を0番目とする)から前方に、最初に key が現れる位置(string の最初の文字を0番目とする)を、見つからない場合は -1 を返します。

JavaScript
fileName = "xxx.gif";
if ((n = fileName.lastIndexOf(".")) != -1) {
  ext = fileName.substring(n);
}
string.startsWith(str)
string.endsWith(str)
string.includes(str)

string の中に str を含んでいるか否かを判断します。startsWith() は str で始まっていれば、endsWith() は str で終わっていれば、includes() は str を含んでいれば true を、さもなくば false を返します。IE11 ではサポートされていません。

JavaScript
"ABCDEFG".startsWith("ABC");        // => true
"ABCDEFG".startsWith("EFG");        // => true
"ABCDEFG".includes("DEF");          // => true

文字列のマッチング

string.match(regexp)

正規表現 regexp に最初にマッチした部分の文字列を返します。マッチしなかった時は null 値を返します。

JavaScript
if ("ABCDEFG".match(/def/i)) {
  console.log("Match");
}

string から 正規表現 regexp にマッチする部分の位置を返します。見つからなければ -1 を返します。

JavaScript
if ("ABCDEFG".search(/def/i) != -1) {
  console.log("Match");
}

文字と文字コードの変換

string.charCodeAt(n)

stringn 番目(最初の文字を0番目とする)の文字の、UTF-16 における文字コードを返します。サロゲートペアには対応していません。

JavaScript
str = "日本語";
for (var i = 0; i < str.length; i++) {
  console.log(str.charCodeAt(i).toString(16));       // => 65e5 672c 8a9e
}
string.codePointAt(n)

stringn 番目(最初の文字を0番目とする)の文字の、UTF-16 における文字コードを返します。サロゲートペアに対応しています。Chrome, Firefox, Safari, Edge ではサポートされていますが、IE11 ではサポートされていません。

JavaScript
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++;
  }
}
◆ String.fromCharCode(num1, ..., numN)

文字コード num1, ..., numN で表される文字列を返します。サロゲートペアには対応していません。

JavaScript
String.fromCharCode(0x41, 0x42, 0x43);           // => "ABC"
String.fromCharCode(0x65e5, 0x672c, 0x8a9e);     // => "日本語"
◆ String.fromCodePoint(num1, ..., numN)

UTF-16 における文字コード num1, ..., numN で表される文字列を返します。サロゲートペアに対応しています。IE11 ではサポートされていません。

JavaScript
String.fromCodePoint(0x20b9f, 0x308b);           // => "𠮟る"

文字列のタグつけ

string.bold()
string.italics()
string.fixed()
string.big()
string.small()
string.strike()
string.sup()
string.sub()
string.fontcolor(color)
string.fontsize(size)
string.anchor(name)

string を <b>、<i>、<tt>、<big>、<small>、<blink>、<strike>、<sup>、<sub>、<font color="color">、<font size="size">、<a name="name">、<a href="name"> の開始タグ、終了タグで囲んだ文字列を返します。

JavaScript
"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>

JSON文字列の変換

◆ JSON.parse(str)
◆ JSON.stringify(obj)

ES5 からは、JSON 文字列と JavaScript オブジェクトを相互変換する機能が追加されました。ES5 で定義され、Chrome, Firefox, Safari, Edge, IE8 で利用可能です。

JavaScript
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文字列

◆ サロゲートペア

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文字とした場合の文字数をカウントしています。

JavaScript
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('森鷗外𠮟る');
string.normalize([form])

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 ではサポートされていません。

JavaScript
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)

[up] [prev] [next]
Copyright (C) 1996-2019 杜甫々
改訂版初版:2006年11月12日、最終更新:2019年2月24日
http://www.tohoho-web.com/js/string.htm