제목이 너무 길면 javascript를 사용하여 bytes_javascript 팁으로 문자열을 가로채세요.

프론트엔드 개발자로서 웹 페이지 표시에서 제목이 너무 길고 문자열을 가로채야 하는 경우가 종종 있습니다. CSS를 사용하여 구현하면 다양한 호환성 문제와 여러 가지 함정이 있습니다.

배경 프로그램에 잘라달라고 하고, 배경에 바이트 단위로 잘라달라고 여러 가지 핑계를 대는 것은 결국 배경을 죽이는 것과 같으니, 결국 문자 길이에 따라서만 잘라낼 수 있을 뿐입니다. 최종 결과가 좋지 않을 경우에는 CSS를 다시 조정하여 호환성을 조정하는 것이 좋습니다.

위의 인상을 받은 프론트엔드 학생들은 조용히 좋아할 것입니다.

최근 백엔드에서는 인터페이스(json)만 제공하고 모든 페이지의 데이터 렌더링과 데이터 바인딩은 프런트 엔드에 맡겨지는 프로젝트를 접했습니다. 마지막으로 SEO와 상관없이 페이지의 모든 주도권이 내 손에 있었고, 나는 무심코 바이트 가로채기라는 오래된 문제에 직면하게 되었습니다.

인터넷에 떠돌고 있는 바이트 길이를 간단히 알아내는 자바스크립트 방법이 있습니다:

코드 복사 코드

String.prototype.Blength = function(){//문자열 길이를 바이트 단위로 반환합니다.
return this.replace(/([^x00-xFF])/g , "aa").length;

아스키 코드보다 큰 문자는 2바이트로 계산되지만 이를 지원하기 위해 사용됩니다. 표시 효과가 너무 엄격하면 좋지 않습니다.

하지만 항상 조금 기회주의적이라고 생각하고 정규식을 사용하는 것은 좋지 않습니다. 실제로 시간이 많이 걸립니다. 두 줄의 코드가 있어서 일반적인 방법을 사용하기로 했습니다.

코드 복사 코드는 다음과 같습니다.

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

메서드를 String 개체의 프로토타입으로 확장하지 않았거나 효율성 문제로 인해 테스트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//String String.prototype.Blength = function () {
var str = this,
n = 0
for (var i = str.length; i--; ) {
n = str.charCodeAt(i) > 2 : 1;
return n
}
//String 객체에 메서드 추가
String.getBlength ) {
for (var i = str.length, n = 0; i--; ) {
n = str.charCodeAt(i) > 2 : 1; return n;
}
//중국어와 영어가 혼합된 긴 문자열을 먼저 구성합니다.
var str = "바이트 메소드 getBlength를 통한 javascript의 효율적인 문자열 차단javascript 바이트 메소드 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("길이에 걸리는 시간: ",new Date() - time1)

var time2 = new Date()
for(var i=0;iString.getBlength(str)
}
console.log("getBlength는 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;
return n;
}
//지정된 바이트에 따라 문자열을 자릅니다. function (str,len,endstr){
var len = len
,endstr = typeof(endstr) == 'undefine' ? "..." : endstr.toString()
function n2( a ){ var n = a / 2 | 0; return (n > 0 ? n : 1)} //이진 검색에 사용됩니다
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
}


위의 문자열을 테스트해 보세요. 길이가 길수록 로드하는 데 시간이 더 많이 걸립니다. 20W 길이로 잘라보세요.

복사 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로 시작','...') >> 1은 1로 시작 String.cutByte(str,12,'...') >> ...

String.cutByte(str,13, '..') >> 자바스크립트 ..

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


--효율성 테스트 시작--
시간 소모: 155

실제로 가로채는 문자 길이를 30W와 40W로 변경해도 크게 다르지 않을 것입니다. 바이너리 방식에서는 모두 동일한 수준입니다

이전의 시간이 많이 소요되는 바이트 길이 계산과 비교하면, 검색하고 가로채는 이진법은 2바이트 미만의 길이 계산만 소모합니다.

마지막으로 학생들이여, 와서 효율성에 도전하세요!