文字列に関する究極の JavaScript インタビューの質問: 「105」は「44」より大きいですか? 「123b」は数値にどのくらい変換されますか? 負の数値をスライス、部分文字列、部分文字列などに渡すことができますか? 文字列に対する一般的な操作を要約します)
序文
String は JavaScript の基本変数の 1 つであり、特別なプロパティも持っていますが、その変数は変更できません。オブジェクトを作成するには 2 つの方法があります: 非オブジェクト (例: var x = "Bill")、オブジェクト (例: var y = new String("Bill"))。非オブジェクト メソッドを使用して文字列が作成される場合、ポインタは String プール内の定数を指すスタックに格納されます。オブジェクト メソッドを使用して文字列が作成される場合、ポインタは String オブジェクトを指すスタックに格納されます。山の中。
注: String は不変変数であり、追加、削除、置換などの操作は基本的に複数のオブジェクトの作成と破棄であるため、文字列変数に対して追加、削除、置換などの操作を頻繁に実行しないでください。パフォーマンス。
1. 文字列の比較
1.等価比較
var x = "Bill";
var y = new String("Bill");
var z = "Bill";
x == y // true
x === y // false
x === z // true
非オブジェクト文字列は文字列定数プール内の値を比較し、オブジェクト文字列はポインタ アドレスを比較します。
また、文字列変数を作成する場合、new
実行速度が遅くなりますので作成しないでください。
2. サイズ比較
文字列間の比較では、まず文字列の ASCII コードを順番に取得し、次にどの ASCII コードが最初に大きいかを判断します。文字を ASCII コードに変換するには: charCodeAt(); 文字を ASCII コードに変換するには: fromCharCode(); を使用します。
"105" > "44" // false
"1" > "0987" // true
"1.00004a" > "1.00004b" // false
"absffz" > "absffA" // true
先頭文字の ASCII コードから比較を開始し、判定できない場合は 2 文字目以降を比較します。
大写字母A 到Z 的值是从65 到90,小写a到z 是从91 到 122
。
各文字の具体的なコードスタンプは☞こちら、
文字列と数値の比較は☞こちらの記事を参照してください。
例: 日付タイプの形式が同じ場合、文字列形式のサイズを直接比較して日付のサイズを決定できます。例: "2020-05-01" > "2020-04-02"
2. 文字列を数値に変換する
5 つのメソッドが提供されています: Number()、parseInt()、parseFloat()、new Number()、* | / 1最も効率的なデジタル形式への暗黙的な自動変換を
使用することをお勧めします。* | / 1
新しい Number() オブジェクト作成メソッド、最も効率が悪い
var a = "123.01"
var b = "123.01abc"
var c = "a123.01bc"
var d = "abc123"
Number(a) // 123.01
Number(b) // NaN
Number(c) // NaN
Number(d) // NaN
parseInt(a) // 123
parseInt(b) // 123
parseInt(c) // NaN
parseInt(d) // NaN
parseFloat(a) // 123.01
parseFloat(a) // 123.01
parseFloat(a) // NaN
parseFloat(a)// NaN
Number(" 123 ") // 123
parseInt(" 123 ") // 123
parseFloat(" 123 ") // 123
// * | /
a*1 , a/1 // 和Number结果一致
概要: Number は、空でない文字と数字以外の文字を NaN に変換します。parseInt と parseFloat は、空でない文字と数字以外の文字を解析して、一度に NaN に変換します。違いは、前の数値の値。* | / 1 は Number と同じ結果になります。
3. 文字列の加算と減算
1.追加
"ab" + "b" // abb
"ab" + "cd" // abcd
2. 引き算
"ab" - "b" // NaN
"ab" - "cd" // NaN
"123" - "12" // 111
文字列以外の加算・減算は可能 ☞こちらの記事を参照
4. 文字列のインターセプトや置換などの一般的な操作シナリオ
1. シーン 1、インターセプト
(1)スライス
構文: stringObject.slice(start,end)
start 抽出するスライスの開始インデックス。負の数値の場合、このパラメータは文字列の末尾から開始する位置を指定します。つまり、-1 は文字列の最後の文字を指し、-2 は最後から 2 番目の文字を指し、以下同様になります。
end抽出するセグメントの終わりの直後のインデックス。このパラメータが指定されていない場合、抽出される部分文字列には、元の文字列の先頭から末尾までの文字列が含まれます。このパラメータが負の場合、文字列の末尾からの位置を指定します。
// 正数
"abcd".slice(0) //"abcd"
"abcd".slice() //"abcd"
"abcd".slice(1,5) //"bcd"
"abcd".slice(5,1) //""
// 负数时从右向左数数
//start=-1从d开始,最后一位,end接受正数大于0,或者不传,其他为空
"abcd".slice(-1) // "d"
"abcd".slice(-1,1) //"d"
"abcd".slice(-1,2) //"d"
"abcd".slice(-1,-1) // ""
"abcd".slice(-1,-2) // ""
//start=-3从b开始,end接受负数>=-2正数大于1,其他为空
"abcd".slice(-3,-2) // "b"
"abcd".slice(-3,-1) // "bc"
"abcd".slice(-3,2) // "b"
"abcd".slice(-3,3) // "bc"
//start=1从b开始,end接受负数>=-2正数大于1,其他为空(和上面的例子原理一样)
"abcd".slice(1,-2) // "b"
"abcd".slice(1,-1) // "bc"
"abcd".slice(1,2) // "b"
"abcd".slice(1,3) // "bc"
説明:
slice() メソッドは、文字列の特定の部分を抽出し、抽出された部分を新しい文字列として返すことができます。
String オブジェクトのメソッド、slice()、substring()、および substr() (非推奨) はすべて、文字列の指定された部分を返します。引数として負の数値を使用できるため、slice() は substring() よりも柔軟性が高くなります。lice() は、2 つの文字位置を使用して部分文字列を指定するのに対し、substr() は文字位置と長さを使用して部分文字列を指定するという点で、substr() とは異なります。
String.slice() は Array.slice() に似ていることにも注意してください。
(2)部分文字列
構文: stringObject.substring(start,stop)
start 必須。stringObject で抽出される部分文字列の最初の文字の位置を指定する非負の整数。負の数は 0 を渡すことと同等であり、無意味であることがわかります。
停止は
オプションです。stringObject で抽出される部分文字列の最後の文字より 1 大きい非負の整数。
このパラメータを省略した場合、返される部分文字列は文字列の末尾に移動します。負の数は 0 を渡すことと同等であり、無意味であることがわかります。
// 正数
"abcd".substring(0) //"abcd"
"abcd".substring() //"abcd"
"abcd".substring(1,5) //"bcd"
"abcd".substring(1,2) // "b"
"abcd".substring(5,1) //"bcd"
"abcd".substring(4,2) //"cd"
// 传负数时不报错,但结果非臆想的,相当于0
"abcd".substring(-1) //"abcd"
"abcd".substring(-1,5) //"abcd"
"abcd".substring(1,-5) // "a"
"abcd".substring(1,0) //"a"
"abcd".substring(-1,-5) // ""
"abcd".substring(0,0) // ""
(3)部分文字列
構文: stringObject.substr(start,length)
start 必須。抽出される部分文字列の開始インデックス。数値である必要があります。負の場合、このパラメータは文字列の末尾からの位置を宣言します。つまり、-1 は文字列の最後の文字を指し、-2 は最後から 2 番目の文字を指し、以下同様になります。
長さはオプションです。部分文字列内の文字数。数値である必要があります。このパラメータを省略した場合は、stringObject の先頭から末尾までの文字列が返されます。負の数値の場合は空の文字列を返します
// 正数
"abcd".substr(0) //"abcd"
"abcd".substr() //"abcd"
"abcd".substr(1,5) //"bcd"
// 负数
"abcd".substr(-1) //"d"
"abcd".substr(-1,5) //"d"
"abcd".substr(-2,1) // "c"
"abcd".substr(-2,-1) // ""
"abcd".substr(2,-1) // ""
注:
substr() のパラメータは部分文字列の開始位置と長さを指定するため、substring() やスライス() の代わりに使用できます。start には意味のある負の数を指定できます。
重要: ECMAscript はこのメソッドを標準化していないため、その使用は推奨されません。
重要: IE 4 では、パラメーター start の値は無効です。このバグでは、start は 0 番目の文字の位置を指定します。以降のバージョンでは、このバグは修正されています。
要約(読んだらよくわかりました):
1.slice第一个参数和第二个参数都是字符串的索引值,都可为负数,代表反向的;其返回的子字符串必须是从左到有的,即第二个参数的索引不可以在第一个索引的前面,否则为空
2.substring第一个参数和第二个参数都是字符串的索引值,但是负数特殊相当于0,不代表反向的索引;比slice而言第二个索引可以在第一个索引前面 3.substr ECMAscript标准化没有标准化,不建议用;第一个参数为字符串的索引值,可以为负数,代表反向的索引,第二个参数为截取字符串的长度,因此为负数时相当于0,返回空字符串
2. シナリオ 2. 置き換え
replace 構文: stringObject.replace(regexp/substr,replacement)
regexp/substr
は必須です。置換する部分文字列またはパターンを指定する RegExp オブジェクト。
値が文字列の場合、最初に RegExp オブジェクトに変換されるのではなく、リテラル テキスト パターンとして取得されることに注意してください。
交換が必要です。文字列値。テキストを置換する関数、または置換テキストを生成する関数を指定します。
// 将把 "Doe, John" 转换为 "John Doe" 的形式
let name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
// 将把所有的花引号替换为直引号:
name = '"a", "b"';
name.replace(/"([^"]*)"/g, "'$1'");
// 把字符串中所有单词的首字母都转换为大写:
name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase()+word.substring(1);}
);
Case: 文字列をキャメルケースに変換する
var str="border-bottom-color";
function convertToCamelCase(str) {
return str.replace(/-(\w)/g, function($0, $1) {
return $1.toUpperCase();
});
};
convertToCamelCase(str);
注:
置換には文字列または関数を使用できます。文字列の場合、各一致は文字列に置き換えられます。ただし、置換の $ 文字には特定の意味があります。次の表に示すように、パターン一致から取得された文字列が置換に使用されることを示しています。
キャラクター | 置換テキスト |
---|---|
$1、$2、…、$99 | 正規表現の部分式 1 ~ 99 に一致するテキスト。 |
$& | 正規表現に一致する部分文字列。 |
$` | 一致した部分文字列の左側のテキスト。 |
$' | 一致した部分文字列の右側のテキスト。 |
$$ | 直接数量記号。 |
3. シナリオ 3、オブジェクトと文字列の変換
var obj={
"a":"dt","b":"yuiyi"}
var obj1={
"a":"dt","b":{
"a":"dt"}}
var str = JSON.stringify(obj) // '{"a":"dt","b":"yuiyi"}'
var str1 = JSON.stringify(obj1) //'{"a":"dt","b":{"a":"dt"}}'
JSON.parse(str) // {a: "dt", b: "yuiyi"}
JSON.parse(str1) //{a: "dt", b: {…}}
これは、オブジェクトの浅いコピーや、Vue のルーティング クエリ パラメーターなどのオブジェクトのシリアル化されたパラメーターの受け渡しに使用できます。
4. シナリオ 4、文字列の正規化
文字列は 4 つの通常のメソッドをサポートします
API | 説明する |
---|---|
マッチ() | 1 つ以上の正規表現に一致するものを検索します。 |
交換する() | 正規表現に一致する部分文字列を置換します。 |
検索() | 正規表現に一致する値を取得します。 |
スプリット() | 文字列を文字列配列に分割する |
具体的な使用方法については、w3schoolを参照してください。
5. シナリオ 5. 翻訳
- 文字列内の文字を不必要にエスケープしないでください。なぜですか? バックスラッシュは可読性を損なうため、必要な場合にのみ使用してください。
// bad
const foo = '\'this\' \i\s \"quoted\"';
// good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${
name}'`;
- 正規表現や \n改行、\ttab などの特殊文字を使用する場合は、エスケープを追加する必要があります。
コード | 結果 |
---|---|
\b | バックスペースキー |
\f | ページ変更 |
\n | 新行 |
\r 入力してください | |
\t | 水平タブ |
\v | 垂直タブ |
// 包含千分位的数字校验
let reg = /^\d{1,3}(,\d{3})*(\.\d{1,2})?$/
// 包含斜杆或者反斜杆校验
let reg1 = /\/|\\/
reg1.test("\\") // true
参考文献:
https://github.com/airbnb/javascript#strings
https://www.w3school.com.cn/js/js_strings.asp
http://c.biancheng.net/c/ascii/