JavaScript_javascript 팁에서 문자열과 배열을 조작하는 흥미로운 방법-JS 튜토리얼-php.cn

문자열과 배열은 프로그래밍에서 매우 일반적으로 사용되는 유형이므로 프로그래밍 언어는 문자열과 배열을 기본 유형으로 사용하고 문자열 작업을 단순화하기 위해 많은 문자열 및 배열 메소드를 제공합니다. JavaScript는 문자열 유형과 배열 유형도 제공하며, 문자열을 쉽게 병합, 검색, 바꾸기, 가로채기 등을 수행할 수 있는 기본 문자열 메서드와 배열 메서드가 많이 있습니다.

스크립트 언어로서 JavaScript는 동적 구문 분석 및 실행 메커니즘도 제공하며, 이 기능을 사용하면 문자열을 작동할 때 몇 가지 흥미로운 메서드를 Array와 결합할 수 있습니다. 이러한 방법은 약간 편향적이고 이상할 수 있지만 때로는 효율성, 가독성 및 재사용성 측면에서 더 나은 성능을 발휘합니다.

문자열 반복
문자열을 여러 번 인쇄하려는 경우(예: 구분선을 원하는 경우) 문자열을 여러 번 반복해야 하는 경우가 많습니다. 안타깝지만 JavaScript는 반복과 같은 메소드를 제공하지 않습니다. 물론 루프를 사용하여 서로 연결할 수 있지만 JavaScript에서 Array의 조인 메소드를 사용하여 반복을 구현할 수 있습니다

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

 
function Repeat(str, n) { 
var arr = new Array(n 1) 
return arr.join(str); >} 
/ /output: 
//------- 

 

n 1 배열 요소에 의해 생성된 n 간격을 사용한 다음 이를 대상 문자열과 연결합니다. 문자열 중복 기능을 얻을 수 있습니다.

String 프로토타입을 확장하여 모든 문자열에 메소드 적용 JavaScript의 객체 상속 및 메소드 검색은 프로토타입 체인을 기반으로 하며, 사용된 모든 문자열은 상속된다고 할 수 있습니다. String 객체의 경우, String 객체의 프로토타입에 메소드나 속성을 추가하여 우리가 사용하는 모든 객체에 메소드를 적용할 수 있습니다. 예를 들어 위의 반복 방법을 다음과 같이 변경할 수 있습니다.

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

String .prototype.repeat = function(n) { 
var arr = new Array(n 1) 
return arr.join(this) 
document.write ('-'.repeat(21)) 
//출력: 
//--------- 

 
그러면 문자열을 통해 직접 반복 메소드를 호출하면 위와 같은 결과를 얻을 수 있습니다. 

이를 통해 문자열 메서드를 확장하고 문자열 작업을 단순화할 수 있지만 이로 인해 JavaScript 문자열이 "오염"됩니다. 코드가 다른 파일로 전송되면 해당 파일에서 이 확장자를 얻지 못하여 메서드가 발생할 수 있습니다. 또한 프로토타입 확장 메소드를 호출하는 것은 메소드를 직접 호출하는 것보다 약간 "느립니다". 왜냐하면 JavaScript는 먼저 문자열 객체 자체의 메소드에서 이를 찾으려고 시도한 다음 문자열 메소드의 프로토타입을 찾기 때문입니다. 게다가, 미래에는 우리의 확장 메서드(예: 반복)가 표준 메서드가 될 것이며, 이 코드를 사용하면 표준 메서드를 덮어쓰고 일관성 없는 결과를 얻게 될 것입니다.

그러나 이러한 고려 사항에 관계없이 JavaScript 표준 유형 프로토타입을 확장하면 여전히 프로그래밍에 많은 순회가 발생합니다.

배열을 StringBuilder로 사용
많은 고급 언어에서 더하기 기호()는 문자열 연산에서 문자열 연결을 위한 연산자로 더 많은 의미를 부여받았습니다. 하지만 Java와 C#에서는 문자열 접합 작업을 자주 수행하는 방법도 알고 있습니다. 더하기 기호()를 사용하면 효율성 문제가 발생하므로 이 경우 StringBuilder를 사용하는 것이 좋습니다.
JavaScript는 문자열 연결에 더하기 기호( ) 사용도 지원하지만 효율성 문제도 있습니다. 그러나 JavaScript는 StringBuilder와 같은 클래스를 제공하지 않습니다.

실제로 Java와 C#에서 StringBuilder를 사용할 때 우리 대부분은 Append 메소드를 사용하고 Insert는 거의 사용하지 않습니다. 다행스럽게도 JavaScript의 Array는 크기 제한 없이 자동으로 커지므로 Array를 StringBuilder로 사용하고 마지막으로 빈 문자열을 결합하여 대상 문자열을 연결할 수 있습니다.

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

var sb = []; for(var i = 0; i <=21; i ) {

sb.push(i)
}
document.write(sb.join('')); /출력:
//0123456789101112131415161718192021

StringBuilder에 Array를 사용할지 아니면 직접 문자열 접합을 사용할지 jsPerf에서 둘의 효율성을 비교하는 테스트 사례가 많이 있었습니다. 그러나 초기 값, 환경, 문자열 길이 등의 이유로 결과가 다릅니다. 실제로 문자열의 내용은 그다지 크지 않거나 여러 개의 더하기 기호( )를 사용하여 이를 결합할 수 있으므로 동일한 문자열 변수가 코드의 다른 위치에 추가되는 경우 여전히 문자열 접합이 가능합니다. Join과 함께 Array를 사용하는 것이 더 효율적입니다. <… 문자열을 선택하거나 하위 문자열을 다른 문자열로 바꾸세요.

예를 들어 파일 이름을 지정하는 경우 기본 이름과 접미사를 점(.)으로 구분하여 가져오려고 합니다. 먼저 표준 문자열 메서드를 사용하여 구현된 이러한 작업을 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다. function getBaseName(str) { var pos = str.lastIndexOf('.') if(pos < 0)return str; pos);

}

function getExtension(str) {
var pos = str.lastIndexOf('.')
if(pos < 0)return ''; .substr(pos 1 );
}
var fileName = 'hello_world.js'
document.write(getBaseName(fileName))
document.write('
');
document.write(getExtension(fileName));
//output:
//hello_world
//js

(substr 및 substring, JavaScript에도 슬라이스가 있습니다. 둘 다 문자열의 하위 문자열을 얻는 데 사용할 수 있지만, 선택할 때 종종 당황하는 선택 사항이 너무 많기 때문입니다. 위치가 1이어야 하는지, 음수를 처리하는 방법도 걱정됩니다. 숫자)

전에 조인을 통해 배열을 문자열로 변환하거나 문자열의 분할 메소드를 사용하여 문자열을 배열로 변환할 수 있다는 것을 보았습니다. 위의 파일 이름과 확장자를 가져오는 문제의 경우 파일 이름을 "."에 따라 배열의 여러 부분으로 분할할 수 있습니다. 그런 다음 얻은 숫자가 1보다 크면(접미사 이름이 존재함) 마지막 요소가 얻은 숫자 중 파일 확장자는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

function getBaseName(str) { var segs = str.split('.'); if(segs.length > 1) segs.pop() return segs.join('.' ); }

function getExtension(str) {

var segs = str.split('.') 
if(segs.length <= 1)return ''; return segs.pop(); 
} 

 
파일 이름에 "."가 여러 개 포함될 수 있다는 점을 고려하면 마지막 부분을 제외한 모든 부분을 연결하려면 "."을 사용해야 합니다. 
먼저 문자열을 분할한 다음 결합할 수 있다는 점을 보면 이 두 메서드의 매개 변수에 대해 서로 다른 문자열을 전달하는 것을 생각할 수 있습니다. 이는 하위 문자열 교체를 위해 String의 교체 메서드를 대체할 수 있습니다. 기능이며 전역 대체입니다. 
예를 들어 모든 밑줄(_)을 대시(-)로 바꾸려면 

코드 복사

코드는 다음과 같습니다.

var str = 'hello_from_ider_to_world'.split('_').join('-') document.write(str) // 출력: / / hello-from-ider-to-world

String의 대체 방법과 비교할 때 이 방법의 장점은 대체하려는 경우 전역 대체를 달성할 수 있다는 것입니다. 전역적으로 대체할 수 있는 경우 문자열이 아닌 정규식 개체(RegExp)를 첫 번째 매개 변수로 전달해야 합니다. 예를 들어 이전 교체 작업은 다음과 같아야 합니다.

코드 복사

코드는 다음과 같습니다.
var str = 'hello_from_ider_to_world'.replace(/_/g, '-');
document.write(str);

또 다른 예는 매우 일반적으로 사용됩니다. JavaScript는 우리가 직접 구현할 수 있는 빠른 구현을 제공하지 않지만 Trim 메서드를 사용합니다. 코드 복사

 코드는 다음과 같습니다. 

String.prototype.trim = function() {

return this.replace(/^s |s $/g, '')

우리는 정규식의 매우 강력한 기능이 역참조라는 것을 알고 있습니다. 실제로 JavaScript의 대체는 첫 번째 매개변수에서 역방향 참조를 만들 뿐만 아니라 대체 문자열에서도 역방향 참조를 만들 수 있습니다. 여러 곳에서 백슬래시()와 숫자를 표시로 사용할 수 있는 반면 JavaScript는 달러($)와 숫자를 표시로 사용합니다.

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

 
var friends = '아이더의 친구들, 친구 of Angie' ; var result = friends.replace(/(friends?) of (w )/g, "$2's $1") 
document.write(result); : 
//Ider의 친구, Angie의 친구 

대체 문자열에서 역참조를 만들어 신속하게 "누구누구의 친구"를 "누구누구의 친구"로 전환했습니다. 더 복잡하다면? 상관없습니다. 교체는 Function을 콜백 함수의 매개변수로 받아들일 수도 있습니다. 함수의 첫 번째 매개변수는 전체 일치 항목의 문자열이며, 각 후속 매개변수는 일치 항목에 대한 역참조와 반환 값을 나타냅니다. 함수가 문자열로 사용됩니다. 따라서 많은 용도에서 함수 매개변수는 $0, $1, $2로 표시됩니다. 예를 살펴보겠습니다.

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

var friends = " 내 친구 , 그녀의 친구 및 그의 친구";

var result = friends.replace(/(friends?) of (w )/g, 
function($0, $1, $2) { 
if($2 == 'mine') $2 = 'my'; 
return $2 ' ' $1 
}) 
document.write(result)//output: 
//내 친구, 그녀의 친구 및 그의 친구 

 
콜백 함수를 통해 책임감 있는 문자열 매칭이 많이 이루어질 수 있습니다. 효율성에 관해서는 지금은 고려하지 말자.