JS 문자열 바꾸기() 메서드

소개

문자열 바꾸기() 메서드는 일반적으로 Javascript 학생이 학습 초기에 배우지만, 이때는 기본 사용법만 다루고 나중에 주제를 다시 다루지 않는 경우가 많습니다. 결과적으로 많은 Javascript 개발자는 가장 기본적인 형태로만 사용합니다.

기본 사용량

replace()의 기본 사용법에는 두 개의 문자열을 전달하는 것이 포함됩니다. 첫 번째는 대체되는 문자열이고, 두 번째는 이를 대체하는 데 사용되는 문자열입니다.

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);

다음과 같은 출력이 생성됩니다.

The quick brown fox flies over the lazy dog.

정규 표현식

replace()의 첫 번째 매개변수로 문자열을 제공하는 대신 정규식을 제공하는 것도 가능합니다.

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.

d는 숫자와 일치하고, {4}는 그 중 정확히 4개와 일치합니다. 시작과 끝의 b는 경계와 일치합니다. 이렇게 하면 4자리보다 긴 숫자 부분이 일치하는 것을 방지할 수 있습니다. 실제 사용에서는 전화번호나 신용카드 번호의 일부와 4자리 시퀀스를 구별하기 위해 추가 코드가 필요할 수 있지만 이는 정규식 튜토리얼이 아니기 때문에 생략했습니다.

교체 기능

replace() 메서드의 두 번째 매개변수는 함수일 수 있습니다. 이 함수가 반환하는 내용은 첫 번째 매개변수에 지정된 일치하는 텍스트를 바꾸는 데 사용됩니다. 이는 첫 번째 매개변수로 제공되는 문자열 및 정규식 모두에서 작동합니다.

replace()의 첫 번째 매개변수가 문자열이거나 캡처 그룹이 없는 정규식인 경우 교체 함수는 다음 순서로 3개의 매개변수를 전달합니다.

1. 일치하는 텍스트
2. 경기 위치
3. 원래 완전한 문자열

replace()의 첫 번째 매개변수가 캡처 그룹이 있는 정규식인 경우 마지막 두 매개변수를 제외한 두 번째 및 모든 후속 매개변수가 캡처됩니다. 끝에서 두 번째가 첫 번째 캡처 위치가 되며 마지막 매개변수는 원본 전체 문자열이 됩니다.

정규 표현식을 전역 플래그와 함께 사용하면 일치 항목이 발견될 때마다 함수가 한 번씩 호출됩니다.

replacer 함수는 문자열이 상수 값이기 때문에 대체()의 첫 번째 매개변수로 문자열을 동반하는 경우가 적고 일반적으로 이에 대한 대체를 미리 계산하는 것이 가능합니다. 그러나 문자열과 함께 사용하면 다음과 같은 작업을 수행할 수 있습니다.

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

''를 대체합니다. 이름 배열에서 무작위로 선택된 문자열을 사용하여 다음과 같은 무작위 문장을 생성합니다.

We hold these truths to be self-evident, that all dogs are created equal.

RegEx와 교체 기능 결합

replacer 함수의 진정한 힘은 이를 replacement()의 첫 번째 매개변수로 정규식과 결합하는 데 있습니다. 정규 표현식은 패턴과 일치할 수 있기 때문에 미리 알려지지 않은 문자열과 일치할 수 있으므로 대체 항목을 생성하기 위해 일치하는 텍스트를 처리하는 함수가 필요할 수 있습니다.

스네이크 케이스를 카멜 케이스로 변환하는 예는 다음과 같습니다.

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName

w는 텍스트의 단일 문자와 일치합니다. 정규식에서 밑줄 뒤에 오므로 밑줄 뒤의 첫 글자와 일치합니다. 괄호는 문자열의 일부로 밑줄 없이 이 문자만 포함하는 캡처 그룹을 만드는 데 사용됩니다. (일치의 두 번째 문자만 취하면 간단하겠지만 캡처 그룹을 설명하고 싶었습니다.) 이 문자는 replacement 함수에 의해 두 번째 매개변수로 수신된 후 대문자로 표시되어 반환됩니다. 원래 밑줄과 문자로 구성된 전체 하위 문자열을 대체하므로 밑줄을 지우고 그 뒤에 오는 문자를 대문자로 표시합니다.

다음은 16진수 색상 코드를 RGB 색상으로 변환하는 또 다른 예입니다.

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));

결과 출력은 다음과 같습니다.

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}

정규식은 문자 0~9 및 A~F로 정의된 정확히 6개의 16진수가 바로 뒤에 오는 #과 일치합니다. i 플래그는 대소문자를 무시하는 데 사용되므로 대문자와 소문자 모두에 대해 작동합니다. 대체 함수는 16진수 코드에서 하위 문자열을 가져와 구문 분석하여 10진수를 생성하고, 이 숫자는 "rgb("와 ")" 사이에 배치되어 rgb() 색상을 생성합니다.

결론

기존 문자열을 수정하는 방법은 여러 가지가 있지만, 위치 대신 내용을 기반으로 하위 문자열을 대체하는 것이 목표인 경우에는 replacement() 메서드를 사용하는 것이 좋은 선택인 경우가 많습니다. 이것이 없으면 일반적인 솔루션은 먼저 부분 문자열의 위치를 ​​검색한 다음 해당 지점에서 문자열을 분할하고 대체 항목과 연결하는 것이며 이는 효율적이지 않습니다.

위 내용은 JS 문자열 바꾸기() 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!