Si le titre est trop long, utilisez javascript pour intercepter la chaîne par les astuces bytes_javascript

En tant que développeur front-end, je rencontre souvent dans l'affichage d'une page Web que le titre est trop long et que les chaînes doivent être interceptées. S'il est implémenté à l'aide de CSS, il existe divers problèmes de compatibilité et divers pièges.

Demander au programme d'arrière-plan de le couper et trouver diverses excuses pour demander à l'arrière-plan de le couper par octets revient à tuer l'arrière-plan. En fin de compte, il ne peut être coupé qu'en fonction de la longueur du caractère, et le résultat final n'aura pas l'air bon. S'il n'est pas correct, il vaut mieux revenir en arrière et ajuster le CSS et ajuster la compatibilité

Les étudiants front-end qui ont les impressions ci-dessus peuvent l'aimer en silence ;

Je suis récemment tombé sur un projet où le backend ne fournissait qu'une interface (json), et le rendu des données et la liaison des données de toutes les pages étaient laissés au front-end. Enfin, quel que soit le référencement, toute l'initiative sur la page était entre mes mains et j'ai rencontré par inadvertance le vieux problème de l'interception d'octets.

Il existe une méthode Javascript pour obtenir simplement la longueur des octets qui circulent sur Internet :

Copier le codeLe code est la suivante :

String.prototype.Blength = function(){//Renvoyer la longueur de la chaîne en octets
return this.replace(/([^x00-xFF])/g , "aa"). length;
};

C'est très simple. Les caractères plus grands que le code ASCII sont comptés pour deux octets. Bien que ce ne soit pas correct à proprement parler, nous l'utilisons pour vous aider. l'effet d'affichage. Ce n'est pas bien si c'est vraiment strict

Mais j'ai toujours l'impression que c'est juste un peu opportuniste, et ce n'est pas bien d'utiliser des expressions régulières, qui prennent du temps. deux lignes de code, j'ai donc décidé d'utiliser la méthode normale Calcul :

Copier le code Le code est le suivant :

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

Je n'ai pas étendu la méthode au prototype de l'objet String, ou en raison de problèmes d'efficacité, voici le code de test :

Copier le code Le code est le suivant :

//Développer le prototype de 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 ;
//Ajouter une méthode à l'objet String
String.getBlength = function (str ) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) > 2 : 1; return n;
}
//Construisez d'abord une longue chaîne mixte chinoise et anglaise
var str = "interception efficace des chaînes par la méthode javascript getBlengthjavascript interception efficace des chaînes par la méthode des octets getBlength"; str = str.replace(/./g, str).replace(/./g , str);
console.log("La longueur de la chaîne créée est : ", str.length)
console .log("-------------Le test commence-- ------------")
console.log("str.Blength() > > ",str.Blength())
console.log("String.getBlength (str) >> ",String.getBlength(str))
console.log("--Le test d'efficacité démarre --")

var time1 = new Date()
for (var i=0;i<100;i ){
str.Blength()
}
console .log("Blength prend du temps : ",new Date() - time1);

var time2 = new Date()
for(var i=0;i<100;i ){
String.getBlength(str)
}
console.log("getBlength consume When: ",new Date() - time2


Le résultat n'est pas du tout inefficace); . Quant à la raison, il se peut que du temps soit consacré à la récupération de la chaîne prototype. Je n'y suis pas allé, je la connais. Laissez-moi un message :

La longueur de la chaîne créée est. : 314432

-------------Le test commence-------------




Copier le code

Le code est le suivant : str.Blength() >> 425408 String.getBlength(str) >> >--Le test d'efficacité démarre--

Blength prend du temps : 1774

getBlength prend du temps : 95


Maintenant pour intercepter La fonction de base de string est maintenant disponible, car dans ce cas le la longueur maximale des octets occupés par un caractère est de 2, il est donc préférable d'utiliser la méthode binaire pour trouver la position d'interception appropriée.

Donnez-moi une fonction d'interception qui devrait être assez efficace :

Copiez le code

Le code est le suivant :

//Calcul simple de la longueur d'octet
String.getBlength = function (str) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) > 2 : 1;
}
return n;
//Tronque la chaîne en fonction des octets spécifiés
String.cutByte = function (str,len,endstr){
var len = len
,endstr = typeof(endstr) == 'indéfini' "..." : endstr.toString(); a ){ var n = a / 2 | 0; return (n > 0 ? n : 1)} //Utilisé pour la recherche binaire
if(!(str "").length || !len || len< ;=0){return "";}
if(this.getBlength(str) <= len){return str;} //Le jugement le plus long de toute la fonction, bienvenue pour optimiser
var lenS = len - this.getBlength(endstr)
,_lenS = 0
, _strl = 0
while (_strl <= lenS){
var _lenS1 = n2(lenS -_strl)
_strl = this.getBlength(str.substr(_lenS,_lenS1))
_lenS = _lenS1
}
return str.substr(0,_lenS-1) endstr
}


Testez la chaîne ci-dessus. Plus elle est longue, plus le chargement prend du temps. Essayez de la couper à une longueur de 20W :

Copier. code Le code est le suivant :

console.log("La longueur de la chaîne créée est : ",str.length," La longueur en octets est : ",String.getBlength(str) )

console.log("-------------Le test démarre-------------")
console.log("String. cutByte('1 commence par 1',6,'...') >> ",String.cutByte('1 commence par 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("--Le test d'efficacité démarre--")
var time1 = new Date()
for(var i=0;i<100 ;i ){
String. cutByte(str,200000,'...')
}
console.log("Consommation de temps :",new Date() - time1); 🎜>
Résultat de sortie :

La longueur de la chaîne créée est : 314432 La longueur en octets est : 425408

-------------Le test commence--- ---------- -




Copier le code

Le code est le suivant : String.cutByte('1 commence par 1',6 ,'...') >> 1 commence 1 String.cutByte(str,12,'...') >> ...

String.cutByte(str,13, '..') >> javascript ..

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


--Le test d'efficacité démarre--
Prend du temps : 155

En fait, changer la longueur des caractères interceptés à 30W et 40W ne sera pas très différent face à la méthode binaire, tout cela est au même niveau

Par rapport au calcul fastidieux précédent de la longueur d'octet, en utilisant. la méthode binaire pour rechercher et intercepter ne consomme que moins de deux octets de calculs de longueur

Enfin, étudiants, venez défier votre efficacité !