ホームページ  >  記事  >  ウェブフロントエンド  >  javascript_javascript スキルでの replace() メソッドの使用

javascript_javascript スキルでの replace() メソッドの使用

WBOY
WBOYオリジナル
2016-05-16 16:02:411267ブラウズ

最近、Alibaba のフロントエンド面接の質問をいくつか閲覧していましたが、その 1 つは JavaScript での replace() メソッドの使用に関するものでした。元の質問は次のとおりです。

「次の関数が何をするのか教えてください。空白には何を入力すればよいですか?」

 // define 
 (function (window) { 
   function fn(str) { 
     this.str = str; 
   } 
   fn.prototype.format = function () { 
     var arg = ______; 
     return this.str.replace(_______, function (a, b) { 
       return arg[b] || ''; 
     }); 
   } 
   window.fn = fn; 
 })(window); 
 // use 
 (function(){ 
   var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
   console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') ); 
 })();

以下は分析プロセスです(番号を付けた方が良い気がしますが、個人的にはより整理されていると思います)

1. この質問には、匿名関数やプロトタイプなどの他の知識ポイントも含まれるためですが、それはこの議論の焦点では​​ありません。

2. 質問によると、この質問のソース コードはテンプレート エンジンの作成に似ていることがわかります。テンプレート内の '{1}' などのプレースホルダーを、テンプレートに渡されたパラメーターに置き換えます。したがって、 arg は引数である必要があります。しかし! ! ! arg は配列ではなく、配列のようなオブジェクトであるため (理解できない場合は、自分でググってください (u_u))、いくつかの変換を行う必要があります。

コードをコピー コードは次のとおりです。
var arg=Array.prototype.slice.call(arguments ,0) ;

3. 等号の右側は最初の空の答えです。ここまで述べたので、2 番目のスペースが議論の焦点です~~~~~~2 番目のスペースは、正規表現によってプレースホルダーを検索し、プレースホルダー内の数値に従って変換することであることは誰もが知っています。正直に言うと、replace メソッドの 2 番目のパラメータが関数であることはほとんどありません。次のコードを見てください。

コードをコピーします コードは次のとおりです:
var pattern=/8(.*)8/;
var str='これは 8baidu8';
document.write(str.replace(pattern,'8e99a69fbe029cd4e2b854e244eab143$1128dba7a3a77be0113eb0bea6ea0a5d0'));

4. replace の 2 番目のパラメーターが関数である状況は比較的少ないため、2 番目のパラメーターが関数である状況に焦点を当てましょう。

まず、これは置換関数の構文です: stringobject.replace(regexp/substr,replacement)

regexp/substr が必要な場合。置換する文字列またはパターンを指定する正規表現オブジェクト。 (値が文字列の場合、最初に正規表現オブジェクトに変換されるのではなく、リテラル リテラル パターンとして取得されることに注意してください。) 置換が必要です。文字列値。テキストを置換する関数、または置換テキストを生成する関数を指定します。最後に、正規表現の最初の一致またはすべての一致を置換で置き換えた後に取得される新しい文字列が返されます。

5. ECMAScript では、replace() メソッドのパラメータ置換には文字列ではなく関数を使用できると規定されています。この場合、関数は一致するたびに呼び出され、関数が返す文字列が置換テキストとして使用されます。最初のパラメータは一致した文字を表し、2 番目のパラメータは一致した文字の最小インデックス位置 (RegExp.index) を表し、3 番目のパラメータは一致した文字列 (RegExp.input) を表します。

6. したがって、2 番目のスペースは /{(d )}/g のように記述でき、ステートメントに配置された完全な文は次のようになります。

コードをコピーします コードは次のとおりです: return this.str.replace(/{(d )}/g, function (a, b) {
引数[b]を返します ||
});



最初の一致を実行するとき、{0} は arg[0] に置き換えられます
最初の一致を実行するとき、{1} は arg[1] に置き換えられます。 最初の一致を実行するとき、{2} は arg[2]

に置き換えられます。
7. 以上がjsの文字列メソッドreplace()の第二引数の関数としての説明です(不備があればご自身で追加してください) もちろん、このインタビューの質問も解決済みですよ~。 ~~~~

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。