JavaScript의 가장 숨겨진 기능 ✍️

JavaScript를 알고 있다고 생각하십니까? 다시 생각 해봐. 🤔

문자열의 replace() 메서드에 대해 말씀드리겠습니다. 함수를 전달할 수 있습니다.

이것은 무엇을 의미 하는가? 보여드리겠습니다.

비디오 튜토리얼

이 기능에 대한 제 비디오 자습서를 보려면 아래에서 자유롭게 시청하십시오 👇

함수를 replace() 메서드에 전달

대부분의 사람들은 replace() 방법이 어떻게 작동하는지 알고 있습니다. 대체 값과 함께 찾기 위해 문자열이나 정규식을 전달합니다.

예를 들어 모든 숫자를 "NUMBER"라는 구로 바꾸겠습니다.

const myString = "Order Number: 4 2 8 3";
const result = myString.replace(/\d/g, "NUMBER");

// result == "Order Number: NUMBER NUMBER NUMER NUMBER"

아주 간단합니다. 하지만 여기서 흥미로운 부분이 있습니다 👇

대체 값으로 함수를 전달할 수도 있습니다. 해당 함수의 반환 값은 실제 "대체"로 사용되는 것입니다.

이번에는 대신 함수를 사용하여 위와 동일한 예를 살펴보겠습니다.

const myString = "Order Number: 4 2 8 3";
const result = myString.replace(/\d/g, match => {
    return "NUMBER";
});

// result == "Order Number: NUMBER NUMBER NUMER NUMBER"

이것은 동일한 결과를 생성합니다. 그런데 왜 이 기술을 사용하고 싶습니까? 글쎄, 당신은 약간의 논리를 추가할 수 있습니다 😎

이제 3보다 큰 숫자만 "NUMBER"라는 구문으로 바꾸겠습니다.

const myString = "Order Number: 4 2 8 3";
const result = myString.replace(/\d/g, match => {
    if (Number(match) > 3) {
        return "NUMBER";
    }

    return match;
});

// result == "Order Number: NUMBER 2 NUMER 3"

알다시피 대체 함수의 첫 번째 인수는 일치이며, 이는 replace() 메서드의 첫 번째 인수를 사용하여 찾은 각 일치 항목(이 경우 숫자)을 참조합니다.

이 기술이 정규 표현식의 복잡성을 줄일 수 있기를 바랍니다 😉

즐기다!

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1