タイトルが長すぎる場合は、JavaScript を使用して bytes_javascript のヒントで文字列をインターセプトしてください

フロントエンド開発者として、Web ページの表示ではタイトルが長すぎるため、CSS を使用して実装すると文字列をインターセプトする必要がある場合に、さまざまな互換性の問題やさまざまな落とし穴が発生することがあります。

バックグラウンドプログラムにカットをお願いしたり、色々言い訳してバックグラウンドにバイト単位でカットをお願いしたりするのは、結局バックグラウンドを潰すのと同じで、文字の長さに合わせてカットするだけかもしれません。最終結果が正しくない場合は、戻って CSS を調整し、互換性を調整することをお勧めします。

上記のような感想を持つフロントエンドの学生は、黙って気に入っていただけます。

最近、バックエンドがインターフェイス (json) のみを提供し、すべてのページのデータ レンダリングとデータ バインディングがフロント エンドに任せられているプロジェクトに遭遇しました。最後に、SEO とは関係なく、ページ上のすべての主導権は私の手にあり、うっかりバイトインターセプトという古い問題に遭遇してしまいました。

インターネット上で流通しているバイト長を簡単に取得する Javascript メソッドがあります:

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

String.prototype.Blength = function(){//文字列の長さをバイト単位で返します
return this.replace(/([^x00-xFF])/g , "aa");
};

これは非常に単純ですが、厳密には正しくありませんが、これを使用します。

でも、正規表現を使うのは手間がかかるだけで、ちょっとご都合主義な気もします。コードは 2 行なので、通常の計算方法を使用することにしました。

コードをコピー コードは次のとおりです。 >

関数 getBlength(str){
for (var i=str.length;i--;){
n = str.charCodeAt(i) > 255 ?
}
return n;
}

効率の問題のため、メソッドを String オブジェクトのプロトタイプに拡張しませんでした。テスト コードは次のとおりです。

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

// String String.prototype.Blength = function () {
var str = this,
n = 0;
for (var i = str.length; i--; ) {
n = str.charCodeAt(i) > 255 ? 2 : 1;
return n ;
}
//String オブジェクトにメソッドを追加します
String.getBlength = function ) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) > 2 : 1; return n;
}
//最初に中国語と英語が混在した長い文字列を構築します
var str = "javascript バイトによる文字列の効率的なインターセプト getBlengthjavascript バイトによる文字列の効率的なインターセプト getBlength"; str = str.replace(/./g, str).replace(/./g , str);
console.log("作成された文字列の長さは次のとおりです: ",str.length)
console .log("---------------テストが始まります-- ------------")
console.log("str.Blength() > > ",str.Blength())
console.log("String.getBlength (str) >> ",String.getBlength(str))
console.log("-- 効率テストの開始--")

var time1 = new Date()
for (var i=0;istr.Blength()
}
コンソール.log("Blength には時間がかかります: ",new Date() - time1);

var time2 = new Date()
for(var i=0;iString.getBlength(str)
}
console.log("getBlength contains When: ",new Date() - time2);


結果は少し非効率的です理由については、プロトタイプ チェーンの取得に時間がかかっている可能性があります。私はそれを知っています。

作成された文字列の長さは次のとおりです。 : 314432
---------------テスト開始-------------

コードをコピー

コードは次のとおりです。 str.Blength() >> 425408 String.getBlength(str) >> >--効率テストの開始-- Blength は時間がかかります: 1774 getBlength は時間がかかります: 95

今度はインターセプトします 文字列の基本関数が利用できるようになりました。文字が占める最大バイト長は 2 であるため、適切なインターセプト位置を見つけるにはバイナリ方式を使用するのが最善です。

非常に効率的なインターセプト関数を教えてください:

コードをコピーします


コードは次のとおりです。

//バイト長の単純な計算
String.getBlength = function (str) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) > 255 ? 2 : 1;
}
}
// 指定されたバイト数に従って文字列を切り詰めます。 function (str,len,endstr){
var len = len
,endstr = typeof(endstr) == '未定義' "..." : endstr.toString(); a ){ var n = a / 2 | return (n > 0 ? n : 1)} //二分探索に使用します
if(!(str "").length || !len || lenif(this.getBlength(str) var lenS = len - this.getBlength(endstr)
,_lenS = 0
, _strl = 0
while (_strl var _lenS1 = n2(lenS -_strl)
_strl = this.getBlength(str.substr(_lenS,_lenS1))
_lenS = _lenS1
}
return str.substr(0,_lenS-1) endstr
}


上の文字列をテストします。長ければ長いほど、読み込みに時間がかかります。

コピーしてください。 code コードは次のとおりです: console.log("作成された文字列の長さは: ",str.length," バイト長は: ",String.getBlength(str) )

console.log("-------------テスト開始-------------")

console.log("String.cutByte('1 は 1',6,'...') >> ",String.cutByte('1 は 1',6,'...'))
console.log("String .cutByte(str,12,'...') >> ",String.cutByte(str,12,'...'))
console.log( "String.cutByte(str,13, '..') >> ",String.cutByte(str,13,'..'))
console.log("String.cutByte(str,14, '.') >> " ,String.cutByte(str,14,'.'))
console.log("String.cutByte(str,15,'') >> ",String. CutByte(str,15,'') )
console.log("--効率テストの開始--")
var time1 = new Date()
for(var i=0;iString.cutByte(str,200000,'...')
}
console.log("時間がかかります:",new Date() - time1); 🎜>
出力結果:

作成された文字列の長さ: 314432 バイト長: 425408
-------------テスト開始--- ---------- -

コードをコピー

コードは次のとおりです: String.cutByte('1 は 1 で始まります',6 ,'...') >> 1 は 1 から始まります String.cutByte(str,12,'...') >> ... String.cutByte(str,13, '..') >> javascript ..

String.cutByte(str,14,'.') >> javascript 高い。 >String.cutByte(str,15,'') > javascript high

--効率テストの開始--
時間がかかります: 155

実際には、インターセプトされた文字の長さを 30W と 40W に変更しても、それほど違いはありません。バイナリ方式に直面すると、これはすべて同じレベルにあります

以前の時間のかかるバイト長の計算と比較すると、次のようになります。検索およびインターセプトするバイナリ方式では、長さの計算が 2 バイト未満しかかかりません。

最後に、学生の皆さん、効率に挑戦してください。