JavaScript で文字列と配列を操作する興味深い方法_javascript のヒント

文字列と配列はプログラミングで非常に一般的に使用される型であるため、プログラミング言語は文字列と配列を基本型として使用し、文字列の操作を簡素化するために多くの文字列と配列のメソッドを提供します。 JavaScript には String 型と Array 型も用意されており、文字列の結合、検索、置換、インターセプトなどを簡単に行うための基本的な String メソッドと Array メソッドが多数あります。

JavaScript はスクリプト言語として、動的な解析および実行メカニズムも提供しており、この機能により、String を操作するときにいくつかの興味深いメソッドを Array と組み合わせることができます。これらの方法は少し偏っていて奇妙かもしれませんが、効率、読みやすさ、再利用性の点でパフォーマンスが優れている場合があります。

文字列を繰り返す
多くの場合、文字列を複数回出力したい場合 (たとえば、分割線が必要な場合)、文字列を複数回繰り返す必要があります。 JavaScript には、repeat のようなメソッドが用意されていないのが残念です。もちろん、ループを使用してそれらを結合することもできますが、JavaScript で Array の join メソッドを使用して、repeat

Copy code コードは次のとおりです:

functionrepeat(str, n) {
var arr = new Array(n 1);
return arr.join(str); >}
/ /output:
//-------


n 1 個の配列要素によって生成された n 個のギャップを使用し、それらをターゲット文字列と連結します。文字列の複製機能を取得できます。

メソッドをすべての文字列に適用するために String プロトタイプを拡張します
JavaScript のオブジェクト継承とメソッド検索はプロトタイプ チェーンに基づいており、使用されるすべての文字列は継承されると言えます String オブジェクトの場合、 String オブジェクトのプロトタイプにメソッドまたは属性を追加すると、使用するすべてのオブジェクトにメソッドを適用できます。たとえば、上記の繰り返しメソッドは次のように変更できます:

コードをコピーします コードは次のとおりです:

String .prototype.repeat = function(n) {

var arr = new Array(n 1);
return arr.join(this);
document.write ('-'.repeat(21));
//出力:
//---------------------


次に、文字列を介してrepeatメソッドを直接呼び出すと、上記と同じ結果が得られます。
これにより、文字列メソッドを拡張し、文字列操作を簡素化できますが、コードが他のファイルに転送されると、この拡張子がそのファイルで取得されず、メソッドが破損する可能性があります。さらに、JavaScript はまず文字列オブジェクト自体のメソッド内でプロトタイプ拡張メソッドを見つけてから、文字列メソッドのプロトタイプを見つけようとするため、プロトタイプ拡張メソッドの呼び出しはメソッドを直接呼び出すよりもわずかに「遅く」なります。さらに、将来的には拡張メソッド (repeat など) が標準メソッドになる可能性があり、その場合、このコードを使用すると標準メソッドが上書きされ、一貫性のない結果が得られる可能性があります。

しかし、これらの考慮事項に関係なく、JavaScript の標準タイプのプロトタイプを拡張すると、プログラミングに多くの作業が必要になります。


StringBuilder として配列を使用する

多くの高級言語では、プラス記号 () は文字列操作において、文字列連結の演算子として、より多くの意味を与えられています。ただし、Java と C# では、文字列の結合操作を頻繁に実行する方法もわかっています。プラス記号 () を使用すると効率上の問題が発生するため、この場合は StringBuilder を使用することをお勧めします。 JavaScript は文字列連結にプラス記号 ( ) の使用もサポートしていますが、効率の問題もあります。ただし、JavaScript には StringBuilder のようなクラスがありません。

実際、Java や C# で StringBuilder を使用する場合、ほとんどの人は append メソッドを使用し、insert を使用することはほとんどありません。幸いなことに、JavaScript の Array はサイズに制限なく自動的に拡大するため、Array を StringBuilder として使用し、最後に空の文字列を結合してターゲット文字列を結合できます。

コードをコピーします コードは次のとおりです。 var sb = []

for(var i = 0; i sb.push(i);
}
document.write(sb.join('')); /出力:
//0123456789101112131415161718192021


StringBuilder に Array を使用するか、文字列の直接スプライシングを使用するか? jsPerf では、この 2 つの効率を比較するためのテストケースが数多くありますが、初期値、環境、文字列の長さなどの理由により、結果は異なります。実際、文字列の内容はそれほど大きくないか、複数のプラス記号 ( ) を使用して結合できるため、同じ文字列変数がコード内の別の場所に追加された場合でも文字列の結合が可能です。結合が有効な配列を使用するとより効率的です。

部分文字列の置換検索と文字列の置換には分割を使用します
文字列操作では、文字列の部分文字列が存在するかどうかを確認し、その部分文字列をインターセプトすることがよくあります。文字列を使用するか、部分文字列を別の文字列に置き換えます。

たとえば、ファイル名を指定した場合、ドット (.) で区切られたベース名とサフィックスを取得したいとします。まず、標準の String メソッドを使用して実装されたこれらの操作を見てみましょう:

コードをコピーします コードは次のとおりです:

function getBaseName(str) {
var pos = str.lastIndexOf('.');
if(pos < 0)return
return str.substring(0, pos);
}
関数 getExtension(str) {
var pos = str.lastIndexOf('.');
if(pos <0)return ''; .substr(pos 1 );
var fileName = 'hello_world.js';
document.write('
');
document.write(getExtension(fileName));
//output:
//hello_world
//js


(substr とsubstring、JavaScriptにはsliceもあります どちらも文字列の部分文字列を取得するのに使えますが、選択肢が多すぎるからこそ、位置を1にするべきなのか、マイナスの場合はどうするのかなど、選ぶときに悩むことも多いです。

結合によって配列を文字列に変換したり、String の Split メソッドを使用して文字列を配列に変換したりできることを前に説明しました。ファイル名と拡張子を取得する上記の問題については、「.」に従ってファイル名を配列のさまざまな部分に分割し、取得した数が 1 より大きい場合 (サフィックス名が存在する場合)、最後の要素を取得します。取得した数字の部分がファイルの拡張子です:

コードをコピー コードは次のとおりです: function getBaseName(str) {

var segs = str.split('.');

if(segs.length > 1) segs.pop();
return segs.join('.') );
}
function getExtension(str) {
var segs = str.split('.');
if(segs.length }


ファイル名に複数の「.」が含まれる可能性があることを考慮すると、最後の部分を除くすべての部分を「.」で結合する必要があります。
最初に文字列を分割してから結合できることを考えると、これら 2 つのメソッドのパラメータに異なる文字列を渡すことを考えることができます。これにより、部分文字列の置換のために String の replace メソッドを置き換えることができます。機能、およびグローバル代替品です。
たとえば、すべてのアンダースコア (_) をダッシュ​​ (-) に置き換える場合:

コードをコピーします

コードは次のとおりです: var str = 'hello_from_ider_to_world'.split('_').join('-'); document.write(str);出力:

/ / hello-from-ider-to-world

String の replace メソッドと比較して、このメソッドの利点は、replace を必要とする場合にグローバルな置換を実現できることです。グローバルに置換できる場合は、最初のパラメータとして文字列ではなく正規表現オブジェクト (RegExp) を渡す必要があります。


replace は RegExp と Function をパラメータとして受け入れます

多くの人は、String の replace メソッドが文字列の部分文字列を置換するために使用されることを知っています。また、このメソッドが正規表現を次のように受け入れられることも知っているかもしれません。最初のパラメータ。すべての出現箇所を置換する場合は、RegExp を使用し、グローバル タグを含める必要があります。
たとえば、前の置換操作は次のようになります:


コードをコピーします

コードは次のとおりです: var str = 'hello_from_ider_to_world'.replace(/_/g, '-'); document.write(str);

もう 1 つの例は非常によく使用されます。 JavaScript は自分で実装できる簡単な実装を提供していませんが、trim メソッドを使用します。

コードをコピーします

コードは次のとおりです。 String.prototype.trim = function() { return this.replace(/^s |s $/g, '');

>
We know that a very powerful function of regular expressions is Back Reference. In fact, JavaScript's replace not only makes a backward reference in the first parameter, but also can make a backward reference in the replacement string. Post-quote, but in many places, backslash () plus numbers may be used as markings, while JavaScript uses dollars ($) plus numbers as markings.

Copy code The code is as follows:

var friends = 'friends of Ider, friend of Angie' ;
var result = friends.replace(/(friends?) of (w )/g, "$2's $1");
document.write(result);
//output:
//Ider's friends, Angie's friend

By making backward references in the replacement string, we quickly turned "friends of so and so" into "friends of so and so". What if it’s more complicated? It doesn't matter, replace can also accept Function as a parameter as a callback function. The first parameter of the function is the string in the entire match. Each subsequent parameter represents a backward reference to the match, and the return value of the function is used as the replacement. String. Therefore, in many uses, function parameters are represented by $0, $1, $2. Let’s look at an example:

Copy code The code is as follows:

var friends =" friends of mine , friend of her and friends of his";
var result = friends.replace(/(friends?) of (w )/g,
function($0, $1, $2) {
if($2 == 'mine') $2 = 'my';
return $2 ' ' $1;
});
document.write(result);
//output:
//my friends, her friend and his friends

A lot of very responsible string matching can be achieved through callback functions. As for efficiency, let’s not consider it for now.