> 웹 프론트엔드 > JS 튜토리얼 > 프로토타입 소스코드 간략 분석 문자열 부분(2)_prototype

프로토타입 소스코드 간략 분석 문자열 부분(2)_prototype

WBOY
풀어 주다: 2016-05-16 17:57:11
원래의
982명이 탐색했습니다.
格式 camelize | capitalize |  underscore |  dasherize  | inspect          
变形 toArray |  succ  | times
여기서 유용한 방법은 검사입니다. 참조 매뉴얼에 따르면 해당 기능은 "디버깅을 위해 문자열의 문자열 표현을 반환합니다(즉, 작은따옴표나 큰따옴표로 묶고 ''를 사용하여 특수 문자를 검사합니다. 이스케이프). ", 이 메서드는 Object의 toJSON에도 포함됩니다.

이스케이프해야 하는 문자가 포함되어 있으므로 당연히 바로 아래에 제공되는 이스케이프 문자 정보의 복사본이 필요합니다.
코드 복사 코드는 다음과 같습니다.

String.specialChar = {
'b': '\b',
't': '\ t',
'n': '\n',
'f': '\f',
'r': '\r',
'\': '\\'
}

[JSON.js에는 추가 '''가 있습니다. ""는 JSON 문자열에 나타날 수 없으므로 이스케이프해야 합니다.]

물론 첫 번째 단계는 특수 이스케이프 문자를 바꾸는 것입니다. 초기 버전:
코드 복사 코드는 다음과 같습니다.

함수 검사() {
return this.replace(/[btnfr\]/,function(a){
return String.specialChar[a];
}) ;
}

JSON 형식의 경우 큰따옴표가 필요하므로 자체 반환 형식을 선택할 수 있어야 합니다. 따라서 매개변수 useDoubleQuotes를 사용하는 것이 기본값입니다. 문자열을 반환하려면 따옴표를 사용하세요.
코드 복사 코드는 다음과 같습니다.

functionspec(useDoubleQuotes) {
var escapedString = this.replace(/[btnfr\]/,function(a){
return String.specialChar[a];
})
if (useDoubleQuotes){
return '" ' escapedString.replace(/"/g, '\"') '"';
}
return "'" escapedString.replace(/'/g, '\'') "'";
}

이제 이는 소스 코드의 함수와 유사하지만 Prototype 소스 코드의 구현은 이와 다릅니다. 주요 차이점은 escapedString 섹션에 있습니다. 모든 제어 문자는 소스 코드에 직접 나열되어 있으며 [x00-x1f]로 표시되고 ''는 [x00-x1f\]이므로 위 수정의 초기 버전은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.

functionspec(useDoubleQuotes) {
var escapedString = this.replace(/[x00 -x1f\]/g , function(character) {
if (String.specialChar의 문자) {
return String.specialChar[character]
}
return 문자
}) ;
if ( useDoubleQuotes) return '"' escapedString.replace(/"/g, '\"') '"'
return "'" escapedString.replace(/'/g, '\'' ) "'";
}
[html]
첨부된 것은 x00-x1f에 해당하는 ASCII 제어 문자 인코딩 테이블입니다:


String.specialChar의 문자 외에 다른 제어 문자가 있는 경우 소스 코드에도 제어 문자를 변환하는 단계가 있습니다. 유니코드 표현은 이 메서드 자체가 문자열 형식을 얻기 위한 것이기 때문입니다.
예를 들어 세로 탭 문자 'v'입니다. 'v'.inspect() -->'u000b'
정식 버전:
[code]
functionspec(useDoubleQuotes) {
var escapedString = this.replace(/[x00-x1f \]/g, function(character) {
if (String.specialChar의 문자) {
return String.specialChar[character]
}
return '\u00' charCodeAt() .toPendedString(2, 16);
});
if (useDoubleQuotes) return '"' escapedString.replace(/"/g, '\"') '"'; escapedString.replace(/'/g, '\'') "'";
}

 여기서 toPendedString(length[, radix])는 다음과 같은 경우 현재 Number 객체를 문자열로 변환합니다. 변환된 문자열의 길이가 length로 지정된 값보다 작을 경우 왼쪽의 나머지 숫자를 채우는 데 0이 사용됩니다. 선택적 매개변수인 radix는 변환에 사용되는 기수를 지정하는 데 사용됩니다. 이것은 Number in Prototype의 확장입니다. 지금은 이것만 알아두세요.
따라서 'v'.charCodeAt().toPendedString(2, 16)은 'v'의 문자 인코딩을 16진수 두 자리 인코딩 문자로 변환하는 것입니다. [연산 문자는 범위에 제한이 없으므로 ]를 초과하지 않으며, 마지막으로 'u00'으로 시작합니다.

메서드 설명:
toArray: 문자열을 문자 배열로 분할합니다.
succ: 문자열의 마지막 문자를 유니코드 알파벳에 따라 다음 문자로 변환합니다.
times: 문자열을 반복합니다.
해당 특정 구현도 매우 간단합니다. 문자열 부분의 중요한 부분은 후속 스크립트, JSON 및 대체 처리에 있으며 나머지는 향상되었습니다.

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

function toArray() {
return this.split('');
}

여기서 Split('')은 문자열을 개별 문자로 분할하여 반환합니다. 더 향상시키려면 toArray에 매개변수를 제공하여 구분 기호를 지정할 수 있습니다.
코드 복사 코드는 다음과 같습니다.

function toArray(pattern) {
return this.split(pattern);
}
console.log(toArray.call('내 이름은 xesam',' '));//["my", "name", "is", "xesam" ]

split을 사용한 것일 뿐, 필요하지 않기 때문에 소스코드에서는 하지 않았습니다.

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

function succ() {
return this.slice(0, this.length - 1) String.fromCharCode(this.charCodeAt(this.length - 1) 1);
}

여기서 주요 내용은 다음과 같습니다. fromCharCode 및 charCodeAt 사용 방법. 둘 사이의 명백한 차이점은 fromCharCode가 String의 정적 메서드인 반면 charCodeAt는 문자열(String.prototype에 있음)의 메서드라는 점을 코드에서 볼 수 있습니다. 그러면 둘은 정반대의 효과를 가집니다. 다음은 http://www.w3school.com.cn에서 제공하는 설명입니다.
 fromCharCode()는 지정된 유니코드 값을 받아들인 다음 문자열을 반환합니다.
 charCodeAt() 메서드는 지정된 위치에 있는 문자의 유니코드 인코딩을 반환합니다. 이 반환 값은 0 - 65535 사이의 정수입니다.
succ의 경우 'hello xesam' 문자열을 예로 들어 먼저 끝 문자를 제외한 모든 문자 'hello xesa'를 가져온 다음 유니코드 테이블에서 'm' 뒤에 문자 'n'을 추가합니다. 결과는 'hello xesan'입니다.
이를 바탕으로 'a'부터 'z'까지의 모든 문자를 인쇄하려면 다음 기능을 사용할 수 있습니다.
코드 복사 코드는 다음과 같습니다:

function printChar(start,end){
var s = (start '').charCodeAt()
var e = (end '').charCodeAt();
if(s > e){
s = [e,e=s][0]
for(var i = s ;i <= e; i ){
console.log(String.fromCharCode(i))
}
}
printChar('a','z ');


코드 복사 코드는 다음과 같습니다.
function times(count) {
return count < 1 ? '' : new Array(count 1).join(this)


times의 기능은 반복입니다. 주요 아이디어는 배열 연결자로서 조인을 호출하면 예상된 결과가 나오므로 현재 문자를 추가하는 것입니다. 물론 루프를 이용해 추가할 수도 있지만 그렇게 간단하지는 않습니다.
문자열의 각 문자를 반복하려면 동일한 아이디어를 사용할 수 있습니다.


String.prototype.letterTimes = function(count){
var arr = [];
arr.length = count 1; /w/g ,function(a){
return arr.join(a);
})
}
console.log('xesam'.letterTimes(3));//xxxeeesssaaammm



카멜화 | 대문자 | 대시화 이 네 가지는 주로 변수 이름 변환에 관한 것입니다.
camelize: 대시로 구분된 문자열을 Camel 형식으로 변환합니다.
capitalize: 문자열의 첫 번째 문자를 대문자로, 다른 모든 문자는 소문자로 변환합니다.
밑줄: 낙타 형식의 문자열을 밑줄("_")로 구분된 일련의 단어로 변환합니다.
dasherize: 문자열의 모든 밑줄을 대시로 바꿉니다("_"는 "-"로 바뀜).
가장 확실한 것은 CSS 속성과 DOM 스타일 속성 간의 상호 변환에 사용될 수 있습니다[class 및 float는 이 범주에 속하지 않습니다]. 위의 방법에 대응하여 camelize 메소드를 사용하면 CSS 속성을 해당 DOM 스타일 속성으로 변환할 수 있지만, 그 반대의 경우에는 그러한 메소드가 없으므로 underscore ->



코드 복사 코드는 다음과 같습니다. function camelize() {
return this.replace (/- (.)?/g, function(match, chr) {
return chr ? chr.toUpperCase() : '';
})


핵심은 대체 메소드를 사용하는 것이고 나머지는 매우 간단합니다. "문자열에서 대체 메소드 적용에 대한 간략한 분석"을 참조하세요.

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

function capitalize() {
return this.charAt(0).toUpperCase() this.substring (1).toLowerCase();
}

여기서 charAt(charAt() 메소드는 지정된 위치의 문자를 반환할 수 있음)와 charCodeAt의 차이점에 주목하세요.

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

function underscore() {
return this.replace(/::/g, '/')
.replace(/([A-Z] )([A-Z][a-z])/g, '$1_$2')
. 교체(/ ([a-zd])([A-Z])/g, '$1_$2')
.replace(/-/g, '_')
.toLowerCase()
}

단계 설명 예시:
코드 복사 코드는 다음과 같습니다.

'helloWorld::ABCDefg'.underscore()
//'helloWorld::ABCDefg'
.replace(/::/g, '/') //'helloWorld/ ABCDefg'
.replace( /([A-Z] )([A-Z][a-z])/g, '$1_$2')//helloWorld/ABC_Defg
.replace(/([a-zd]) ([A-Z])/g, '$1_$2') //hello_World/ABC_Defg
.replace(/-/g, '_') //hello_World/ABC_Defg
.toLowerCase() //hello_world /abc_defg

이 방법은 Camel 형태에만 적합합니다. 즉, 'peak'가 있어야 합니다.
코드 복사 코드는 다음과 같습니다.

function dasherize() {
return this.replace (/_/g, '-');
}

이것은 단순한 문자 교체입니다.
샤오시 산쯔에서
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿