Wenn der Titel zu lang ist, verwenden Sie Javascript, um die Zeichenfolge mithilfe von bytes_javascript-Tipps abzufangen

Als Frontend-Entwickler stelle ich bei der Darstellung von Webseiten häufig fest, dass der Titel zu lang ist und Zeichenfolgen abgefangen werden müssen. Bei der Implementierung mit CSS gibt es verschiedene Kompatibilitätsprobleme und verschiedene Fallstricke.

Das Hintergrundprogramm zu bitten, es zu schneiden, und verschiedene Ausreden zu finden, um den Hintergrund zu bitten, es in Bytes zu schneiden, ist dasselbe wie das Töten des Hintergrunds. Am Ende kann es nur entsprechend der Zeichenlänge geschnitten werden. und das Endergebnis wird nicht gut aussehen, es ist besser, noch einmal das CSS anzupassen und die Kompatibilität anzupassen.

Front-End-Studenten, die die oben genannten Eindrücke haben, können es stillschweigend mögen.

Ich bin kürzlich auf ein Projekt gestoßen, bei dem das Backend nur eine Schnittstelle (JSON) bereitstellte und das Datenrendering und die Datenbindung aller Seiten dem Frontend überlassen wurden. Schließlich lag, unabhängig von SEO, die gesamte Initiative auf der Seite in meinen Händen und ich stieß versehentlich auf das alte Problem des Byte-Abfangens.

Es gibt eine Javascript-Methode, um einfach die im Internet verbreitete Bytelänge zu ermitteln:

Code kopieren Der Code lautet wie folgt:

String.prototype.Blength = function(){//Gibt die Stringlänge in Bytes zurück
return this.replace(/([^x00-xFF])/g , „aa“).
};

Es ist wirklich einfach, dass Zeichen, die größer als der ASCII-Code sind, als zwei Bytes gezählt werden Der Anzeigeeffekt ist nicht gut, wenn es wirklich streng ist.

Aber ich habe immer das Gefühl, dass es nur ein wenig opportunistisch ist, und es ist nicht gut, reguläre Ausdrücke zu verwenden, die tatsächlich nur Zeit sparen zwei Zeilen Code, also habe ich mich für die normale Berechnung entschieden:

Code kopieren Der Code lautet wie folgt:

function getBlength(str){
for (var i=str.length;i--;){
n = str.charCodeAt(i) 2 : 1;
}
return n;
}

Ich habe die Methode nicht auf den Prototyp des String-Objekts erweitert, oder aus Effizienzgründen ist das Folgende der Testcode:

Code kopieren Der Code lautet wie folgt:

//Auf den Prototyp von String String.prototype.Blength = function () {
var str = this,
n = 0;
for (var i = str.length; i--; ) {
n = str.charCodeAt(i) > 2 : 1;
}
return n ;
} //Eine Methode zum String-Objekt hinzufügen
String.getBlength = function (str ) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) 255 ? 2 : 1; return n;
}
//Erstelle zuerst einen langen gemischten chinesischen und englischen String
var str = "Javascript effizientes Abfangen von Strings nach Bytes Methode getBlengthjavascript effizientes Abfangen von Strings nach Bytes Methode getBlength"; str = str.replace(/./g, str).replace(/./g , str);
console.log("Die Länge der erstellten Zeichenfolge ist: ", str.length)
console .log("-------------Test beginnt-- ------------")
console.log("str.Blength() > > ",str.Blength())
console.log("String.getBlength (str) >> ",String.getBlength(str))
console.log("--Effizienztest startet --")

var time1 = new Date()
for (var i=0;istr.Blength()
}
console .log("Blength braucht Zeit: ",new Date() - time1);

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


Das Ergebnis ist kein bisschen ineffizient . Was den Grund angeht, kann es sein, dass ich nicht darauf eingegangen bin. Hinterlassen Sie eine Nachricht und sagen Sie mir:

Die Länge der erstellten Zeichenfolge beträgt : 314432
-------------Test beginnt-------------

Code kopieren

Der Code lautet wie folgt: str.Blength() >> 425408 String.getBlength(str) >> >--Effizienztest beginnt-- Blength braucht Zeit: 1774 getBlength braucht Zeit: 95

Jetzt zum Abfangen Die Grundfunktion von String ist jetzt verfügbar, denn in diesem Fall ist die Die maximale Länge der von einem Zeichen belegten Bytes beträgt 2. Daher ist es am besten, die binäre Methode zu verwenden, um die geeignete Abfangposition zu finden.

Geben Sie mir eine Abfangfunktion, die recht effizient sein sollte:

Kopieren Sie den Code


Der Code lautet wie folgt:

//Einfache Berechnung der Bytelänge
String.getBlength = function (str) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) > 2 : 1; function (str,len,endstr){
var len = len
,endstr = typeof(endstr) == 'undefiniert' ? "..." : endstr.toString(); a ){ var n = a / 2 |. 0; return (n > 0 ? n : 1)} //Wird für die binäre Suche verwendet
if(!(str "").length || !len || len< ;=0){return "";}
if(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
}


Testen Sie die Saite oben, desto zeitaufwändiger ist das Laden. Versuchen Sie, sie auf eine Länge von 20 W zu schneiden:

Kopieren Code

Der Code lautet wie folgt: console.log("Die Länge der erstellten Zeichenfolge ist: ",str.length," Die Bytelänge ist: ",String.getBlength(str) ) console.log("-------------Test startet-------------") console.log("String. cutByte('1 beginnt mit 1',6,'...') >> ",String.cutByte('1 beginnt mit 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("--Effizienztest startet--")
var time1 = new Date()
for(var i=0;iString. cutByte(str,200000,'...')
}
console.log("Zeitaufwändig:",new Date() - time1);


Ausgabeergebnis:

Die Länge der erstellten Zeichenfolge beträgt: 314432 Die Bytelänge beträgt: 425408
-------------Test beginnt--- ---------- -

Code kopieren

Der Code lautet wie folgt: String.cutByte('1 beginnt mit 1',6,'...') >> 1 beginnt mit 1 String.cutByte(str,12,'...') >> ... String.cutByte(str,13, '..') >> >String.cutByte(str,15,'') > Das Ändern der abgefangenen Zeichenlänge auf 30 W und 40 W wird sich nicht wesentlich unterscheiden. Im Vergleich zur binären Methode ist dies alles auf dem gleichen Niveau

Verglichen mit der vorherigen zeitaufwändigen Berechnung der Bytelänge Die binäre Methode zum Suchen und Abfangen erfordert nur Berechnungen mit einer Länge von weniger als zwei Bytes.

Schließlich, Studenten, stellen Sie Ihre Effizienz auf die Probe!