JavaScript では、テキスト データは文字列として保存されます。単一の文字に個別のタイプはありません。
文字列の内部形式は常に UTF-16 であり、ページのエンコーディングには関連付けられません。
引用の種類を思い出してみましょう。
文字列は一重引用符、二重引用符、またはバッククォートで囲むことができます。
let single = '一重引用符'; let double = "二重引用符で囲まれた"; let バッククォート = `バッククォート`;
一重引用符と二重引用符は本質的に同じです。ただし、バッククォートを使用すると、 ${…}でラップすることで、文字列に任意の式を埋め込むことができます。
関数 sum(a, b) {
a + b を返します。
}
アラート(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3。バックティックを使用するもう 1 つの利点は、文字列を複数行にまたがることができることです。
let guestList = `ゲスト: * ジョン *ピート *メアリー `; アラート(ゲストリスト); // ゲストのリスト、複数行
自然に見えますよね？ただし、一重引用符または二重引用符はこのようには機能しません。
これらを使用して複数行を使用しようとすると、エラーが発生します。
let guestList = "ゲスト: // エラー: 予期しないトークンが ILLEGAL * ジョン」;
一重引用符と二重引用符は、複数行の文字列の必要性が考慮されていなかった言語創造の古代に由来しています。バッククォートはずっと後に登場したため、より多用途です。
バッククォートを使用すると、最初のバッククォートの前に「テンプレート関数」を指定することもできます。構文はfunc`string`です。関数func自動的に呼び出され、文字列と埋め込まれた式を受け取り、それらを処理できます。この機能は「タグ付きテンプレート」と呼ばれ、めったに見られませんが、MDN: テンプレート リテラルで説明を読むことができます。
改行を表すnと書かれた、いわゆる「改行文字」を使用して、一重引用符と二重引用符を含む複数行の文字列を作成することは依然として可能です。
let guestList = "ゲスト:n * ジョンn * ピートn * メアリー"; アラート(ゲストリスト); // ゲストの複数行リスト、上記と同じ
より簡単な例として、次の 2 行は書き方が違うだけで同じです。
let str1 = "HellonWorld"; // 「改行記号」を使用した 2 行 // 通常の改行とバッククォートを使用した 2 行 let str2 = `こんにちは 世界`; アラート(str1 == str2); // 真実
他にもあまり一般的ではない特殊文字があります。
| キャラクター | 説明 |
|---|---|
n | 改行 |
r | Windows テキスト ファイルでは、2 つの文字rnの組み合わせは新しい区切りを表しますが、Windows 以外の OS では単なるnです。これは歴史的な理由によるもので、ほとんどの Windows ソフトウェアもn理解します。 |
' 、 " 、 ` | 引用 |
\ | バックスラッシュ |
t | タブ |
b 、 f 、 v | バックスペース、フォーム フィード、垂直タブ – 完全を期すために言及しましたが、古い時代からのもので、現在では使用されていません (今は忘れても大丈夫です)。 |
ご覧のとおり、すべての特殊文字はバックスラッシュ文字で始まります。 「エスケープ文字」とも呼ばれます。
これは非常に特殊であるため、文字列内で実際のバックスラッシュ表示する必要がある場合は、それを 2 倍にする必要があります。
alert( `バックスラッシュ: \` ); // バックスラッシュ:
いわゆる「エスケープ」引用符' 、 " 、 `は、同じ引用符で囲まれた文字列に引用符を挿入するために使用されます。
例えば：
alert( '私はセイウチです!' ); // 私はセイウチです!
ご覧のとおり、内側の引用符の前にバックスラッシュ'を追加する必要があります。そうしないと文字列の終わりを示すことになるからです。
もちろん、エスケープする必要があるのは、それを囲んでいる引用符と同じ引用符だけです。したがって、より洗練された解決策として、代わりに二重引用符またはバッククォートに切り替えることができます。
alert( "私はセイウチです!" ); // 私はセイウチです!
これらの特殊文字のほかに、Unicode コードの特別な表記法もありますu… 。これはめったに使用されず、Unicode に関するオプションの章で説明されています。
lengthプロパティには文字列の長さが含まれます。
アラート( `Myn`.length ); // 3
n単一の「特殊」文字であるため、長さは実際には3あることに注意してください。
lengthプロパティです
他の言語のバックグラウンドを持つ人は、 str.lengthだけでなくstr.length()を呼び出してタイプを間違えることがあります。それはうまくいきません。
str.length関数ではなく数値プロパティであることに注意してください。その後に括弧を追加する必要はありません。 .length()ではなく、 .lengthです。
位置posの文字を取得するには、角括弧[pos]を使用するか、メソッド str.at(pos) を呼び出します。最初の文字はゼロ位置から始まります。
let str = `こんにちは`; // 最初の文字 アラート( str[0] ); //H アラート( str.at(0) ); //H // 最後の文字 アラート( str[str.length - 1] ); //o アラート( str.at(-1) );
ご覧のとおり、 .at(pos)メソッドには負の位置を許可できるという利点があります。 posが負の場合、文字列の末尾から数えられます。
したがって、 .at(-1)最後の文字を意味し、 .at(-2)その前の文字を意味します。
角括弧は、負のインデックスの場合には常にundefined返します。次に例を示します。
let str = `こんにちは`; アラート( str[-2] ); // 未定義 アラート( str.at(-2) ); //
for..of使用して文字を反復処理することもできます。
for (「Hello」の文字を入れます) {
アラート(文字); // H,e,l,l,o (文字は "H"、次に "e"、次に "l" などになります)
}JavaScript では文字列を変更できません。キャラクターを変更することは不可能です。
それが機能しないことを示すために試してみましょう:
let str = 'こんにちは'; str[0] = 'h'; // エラー アラート( str[0] ); // 機能しません
通常の回避策は、まったく新しい文字列を作成し、古い文字列の代わりにstrに割り当てることです。
例えば：
let str = 'こんにちは'; str = 'h' + str[1]; // 文字列を置き換えます アラート( str ); // こんにちは
次のセクションでは、この例をさらに見ていきます。
toLowerCase() メソッドと toUpperCase() メソッドは大文字と小文字を変更します。
alert( 'インターフェイス'.toUpperCase() ); // インターフェース alert( 'インターフェイス'.toLowerCase() ); // インターフェース
または、単一の文字を小文字にしたい場合は、次のようにします。
alert( 'Interface'[0].toLowerCase() ); // '私'
文字列内の部分文字列を検索するには、複数の方法があります。
最初のメソッドは str.indexOf(substr, pos) です。
指定された位置posから開始してstr内のsubstrを検索し、一致が見つかった位置を返すか、何も見つからない場合は-1返します。
例えば：
let str = 'ID 付きのウィジェット';
アラート( str.indexOf('ウィジェット') ); // 0、先頭に「Widget」があるため
アラート( str.indexOf('ウィジェット') ); // -1、見つからない、検索では大文字と小文字が区別されます
アラート( str.indexOf("id") ); // 1、「id」は位置 1 で見つかります (..idget with id)オプションの 2 番目のパラメーターを使用すると、指定された位置から検索を開始できます。
たとえば、 "id"が最初に出現するのは位置1です。次の出現箇所を探すには、位置2から検索を開始しましょう。
let str = 'ID 付きのウィジェット';
alert( str.indexOf('id', 2) ) // 12すべての出現に興味がある場合は、ループ内でindexOf実行できます。すべての新しい呼び出しは、前の一致後の位置で行われます。
let str = 'キツネのように賢く、牛のように強い';
ターゲット = 'as' にします。 // 探してみましょう
pos = 0 とします。
while (true) {
let foundPos = str.indexOf(target, pos);
if (foundPos == -1) ブレーク;
alert( `${foundPos}` で見つかりました` );
pos = 見つかったPos + 1; // 次の位置から検索を続行します
}同じアルゴリズムをより短くレイアウトすることができます。
let str = "キツネのように賢く、牛のように強い";
ターゲット = "として";
pos = -1 とします。
while ((pos = str.indexOf(target, pos + 1)) != -1) {
アラート( pos );
} str.lastIndexOf(substr, position)
文字列の末尾から先頭までを検索する同様のメソッド str.lastIndexOf(substr,position) もあります。
発生したものが逆の順序でリストされます。
ifテストのindexOfには少し不便があります。次のようにifに入れることはできません。
let str = "ID 付きのウィジェット";
if (str.indexOf("ウィジェット")) {
alert("見つけました"); // 機能しません!
}上の例のalert 、 str.indexOf("Widget") 0を返すため (開始位置で一致が見つかったことを意味します) 表示されません。正しいですが、 0 falseと見なすif 。
したがって、実際には次のように-1をチェックする必要があります。
let str = "ID 付きのウィジェット";
if (str.indexOf("ウィジェット") != -1) {
alert("見つけました"); // 動作するようになりました!
}より現代的なメソッド str.includes(substr, pos) は、 strにsubstr含まれるかどうかに応じてtrue/falseを返します。
一致をテストする必要があるが、その位置は必要ない場合、これは正しい選択です。
alert( "ID を持つウィジェット".includes("ウィジェット") ); // 真実
alert( "こんにちは".includes("さようなら") ); // 間違いstr.includesのオプションの 2 番目の引数は、検索を開始する位置です。
alert( "ウィジェット".includes("id") ); // 真実
alert( "ウィジェット".includes("id", 3) ); // false、3 番目の位置からは「id」がありません。メソッド str.startsWith および str.endsWith は、まさにそのとおりの動作を行います。
alert( "ウィジェット".startsWith("Wid") ); // true、「ウィジェット」は「Wid」で始まります
alert( "ウィジェット".endsWith("get") ); // true、「ウィジェット」は「get」で終わりますJavaScript には、部分文字列を取得する 3 つのメソッド、 substring 、 substr 、およびsliceあります。
str.slice(start [, end])
文字列のstartからendまで (ただし end は含まない) の部分を返します。
例えば：
let str = "文字列化"; アラート( str.slice(0, 5) ); // 'string'、0 ～ 5 の部分文字列 (5 は含まれません) アラート( str.slice(0, 1) ); // 's'、0 から 1 までですが、1 は含まれないため、0 の文字のみ
2 番目の引数がない場合、 slice文字列の最後まで進みます。
let str = "文字列化"; アラート( str.slice(2) ); // 'ringify'、2 番目の位置から最後まで
start/endに負の値を指定することもできます。これらは、位置が文字列の終わりから数えられることを意味します。
let str = "文字列化"; // 右から4番目で開始、右から1番目で終了 アラート( str.slice(-4, -1) ); // 'gif'
str.substring(start [, end])
startとendの間の文字列の部分を返します ( endは含まれません)。
これはsliceとほぼ同じですが、 start endよりも大きくすることができます (この場合、単にstartとend値を交換します)。
例えば：
let str = "文字列化"; // これらは部分文字列でも同じです アラート( str.substring(2, 6) ); // "指輪" アラート( str.substring(6, 2) ); // "指輪" // ...ただしスライスの場合はそうではありません: アラート( str.slice(2, 6) ); // 「リング」（同じ） アラート( str.slice(6, 2) ); // "" (空の文字列)
負の引数は (スライスとは異なり) サポートされず、 0として扱われます。
str.substr(start [, length])
startから指定されたlengthの文字列の一部を返します。
前のメソッドとは対照的に、このメソッドでは終了位置の代わりにlength指定できます。
let str = "文字列化"; アラート( str.substr(2, 4) ); // 'ring'、2 番目から 4 文字を取得
最初の引数は、最後から数えて負の値になる場合があります。
let str = "文字列化"; アラート( str.substr(-4, 2) ); // 'gi'、4 番目から 2 文字を取得
このメソッドは、言語仕様の付録 B に記載されています。これは、ブラウザーでホストされる JavaScript エンジンのみがこれをサポートする必要があり、使用することはお勧めできないことを意味します。実際には、どこでもサポートされています。
混乱を避けるために、これらのメソッドを要約してみましょう。
| 方法 | 選択します… | ネガティブ |
|---|---|---|
slice(start, end) | startからendまで ( endは含まない) | ネガティブを許可する |
substring(start, end) | startとendの間 ( endは含まない) | 負の値は0意味します |
substr(start, length) | startからlength文字を取得 | マイナスstartが可能 |
どれを選びますか?
全員がその仕事をすることができます。正式には、 substrは小さな欠点があります。それは、コア JavaScript 仕様ではなく、主に歴史的な理由から存在するブラウザ専用の機能をカバーする付録 B で説明されています。そのため、ブラウザ以外の環境ではサポートされない可能性があります。しかし、実際にはどこでも機能します。
他の 2 つのバリアントのうち、 sliceもう少し柔軟で、負の引数や短い記述が可能です。
したがって、実際に使用するには、 sliceだけを覚えておくだけで十分です。
「比較」の章からわかるように、文字列はアルファベット順に 1 文字ずつ比較されます。
ただし、いくつか奇妙な点があります。
小文字は常に大文字よりも大きくなります。
アラート( 'a' > 'Z' ); // 真実
発音区別記号の付いた文字は「順序が乱れています」:
alert( 'エステルライヒ' > 'ジーランド' ); // 真実
これらの国名を並べ替えると、奇妙な結果が生じる可能性があります。通常、人々はリスト内でÖsterreichの次にZealand来ると予想するだろう。
何が起こるかを理解するには、JavaScript の文字列が UTF-16 を使用してエンコードされていることを認識する必要があります。つまり、各文字には対応する数値コードがあります。
コードの文字を取得して戻すことができる特別なメソッドがあります。
str.codePointAt(pos)
位置posの文字のコードを表す 10 進数を返します。
// 大文字と小文字が異なるとコードも異なります alert( "Z".codePointAt(0) ); // 90 alert( "z".codePointAt(0) ); // 122 alert( "z".codePointAt(0).toString(16) ); // 7a (16 進値が必要な場合)
String.fromCodePoint(code)
数値codeで文字を作成します
アラート( String.fromCodePoint(90) ); // Z alert( String.fromCodePoint(0x5a) ); // Z (引数として 16 進値を使用することもできます)
次に、コード65..220 (ラテン文字と少し追加のもの) を持つ文字を文字列を作成して見てみましょう。
str = '';
for (i = 65; i <= 220; i++) {
str += String.fromCodePoint(i);
}
アラート( str );
// 出力:
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~ € ã‚Š
// ¡¢£¤¥ã‚§ã©ã‚«ã®ã °±²³´µ¶·¸¹º»⁄½¾¿ÀÁâãÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ見る？大文字が最初に配置され、次にいくつかの特殊文字が配置され、次に小文字が配置され、出力の終わり近くにÖ配置されます。
これで、なぜa > Zなのかが明らかになります。
文字は数値コードによって比較されます。コードが大きいほど、文字が大きいことを意味します。 a (97) のコードはZのコード (90) より大きくなります。
すべての小文字は、コードが大きいため、大文字の後に続きます。
Öなどの一部の文字は、主要なアルファベットから離れています。ここで、そのコードはaからzまでのどのコードよりも大きくなります。
言語ごとにアルファベットが異なるため、文字列比較を行う「正しい」アルゴリズムは、思っているよりも複雑です。
したがって、ブラウザは比較する言語を認識する必要があります。
幸いなことに、最新のブラウザは国際化標準 ECMA-402 をサポートしています。
これは、ルールに従って異なる言語の文字列を比較するための特別な方法を提供します。
str.localeCompare(str2) の呼び出しは、言語規則に従って、 strがstr2より小さいか、等しいか、または大きいかを示す整数を返します。
strがstr2より小さい場合は、負の数を返します。
strがstr2より大きい場合は、正の数を返します。
同等の場合は0返します。
例えば：
alert( 'Österreich'.localeCompare('Zealand') ); // -1実際、このメソッドにはドキュメントで指定されている 2 つの追加引数があり、これにより言語 (デフォルトでは環境から取得され、文字の順序は言語によって異なります) を指定したり、大文字と小文字を区別したり、 "a"と"á"を使用する必要があるなどの追加ルールを設定したりできます。同じものとして扱われるなど。
見積書は3種類あります。バックティックを使用すると、文字列を複数行にまたがって式${…}を埋め込むことができます。
改行nなどの特殊文字を使用できます。
文字を取得するには、 []またはatメソッドを使用します。
部分文字列を取得するには、 sliceまたはsubstringを使用します。
文字列を小文字/大文字にするには、 toLowerCase/toUpperCaseを使用します。
部分文字列を検索するには、 indexOf使用するか、単純なチェックの場合はincludes/startsWith/endsWith 。
言語に従って文字列を比較するには、 localeCompareを使用します。それ以外の場合、文字コードによって比較されます。
文字列には他にもいくつかの便利なメソッドがあります。
str.trim() – 文字列の先頭と末尾からスペースを削除 (「トリム」) します。
str.repeat(n) – 文字列をn回繰り返します。
…その他の詳細についてはマニュアルを参照してください。
文字列には、正規表現で検索/置換を行うためのメソッドもあります。ただし、これは大きなトピックなので、別のチュートリアル セクション「正規表現」で説明します。
また、現時点では、文字列は Unicode エンコーディングに基づいているため、比較に問題があることを知っておくことが重要です。 Unicode の詳細については、「Unicode、文字列内部」の章を参照してください。
重要度: 5
たとえば、最初の文字が大文字の文字列str返す関数ucFirst(str)を作成します。
ucFirst("ジョン") == "ジョン";テストを含むサンドボックスを開きます。
JavaScript の文字列は不変であるため、最初の文字を「置換」することはできません。
ただし、既存の文字列に基づいて、最初の文字を大文字にした新しい文字列を作成できます。
newStr = str[0].toUpperCase() + str.slice(1); とします。
ただし、小さな問題があります。 strが空の場合、 str[0] undefinedであり、 undefinedはtoUpperCase()メソッドがないため、エラーが発生します。
最も簡単な方法は、次のように空の文字列のテストを追加することです。
関数 ucFirst(str) {
if (!str) は str を返します。
str[0].toUpperCase() + str.slice(1) を返します。
}
アラート( ucFirst("ジョン") ); // ジョンサンドボックス内のテストを含むソリューションを開きます。
重要度: 5
strに 'viagra' または 'XXX' が含まれる場合はtrueを返し、それ以外の場合はfalseを返す関数checkSpam(str)を作成します。
関数は大文字と小文字を区別しない必要があります。
checkSpam('ViAgRAを今すぐ購入') == true
checkSpam('free xxxxx') == true
checkSpam("無邪気なウサギ") == falseテストを含むサンドボックスを開きます。
検索で大文字と小文字を区別しないようにするには、文字列を小文字にして検索します。
関数 checkSpam(str) {
lowerStr = str.toLowerCase(); とします。
return lowerStr.includes('viagra') || lowerStr.includes('xxx');
}
alert( checkSpam('今すぐ ViAgRA を購入') );
alert( checkSpam('free xxxxx') );
alert( checkSpam("無邪気なウサギ") );サンドボックス内のテストを含むソリューションを開きます。
重要度: 5
関数truncate(str, maxlength)を作成します。この関数は、 strの長さをチェックし、それがmaxlengthを超えている場合は、 strの末尾を省略記号文字"…"に置き換えて、その長さをmaxlengthと等しくします。
関数の結果は、(必要に応じて) 切り詰められた文字列である必要があります。
例えば：
truncate("このトピックについて私が伝えたいことは次のとおりです:", 20) == "私が伝えたいことは…"
truncate("皆さんこんにちは!", 20) == "皆さんこんにちは!"テストを含むサンドボックスを開きます。
最大長はmaxlengthでなければならないため、省略記号のためのスペースを確保するために少し短くする必要があります。
実際には、省略記号には単一の Unicode 文字があることに注意してください。それは3つの点ではありません。
関数 truncate(str, maxlength) {
return (str.length > maxlength) ?
str.slice(0, maxlength - 1) + '…' : str;
}サンドボックス内のテストを含むソリューションを開きます。
重要度: 4
"$120"という形式のコストがあります。つまり、ドル記号が最初に来て、次に数字が続きます。
このような文字列から数値を抽出して返す関数extractCurrencyValue(str)を作成します。
例:
alert( extractCurrencyValue('$120') === 120 ); // 真実テストを含むサンドボックスを開きます。
関数 extractCurrencyValue(str) {
+str.slice(1) を返します。
}サンドボックス内のテストを含むソリューションを開きます。