JavaScript의 마스크 변수 값

이 기사에서는 JavaScript 소스 코드에서 변수 값을 마스킹하는 방법과 JavaScript에서 마스킹의 이점을 배웁니다.

정규 표현식과 함께 replace() 메서드를 사용하여 JavaScript에서 변수 값 마스킹

프로그래밍에서 마스크는 사용자가 제공하거나 변수 값으로 변수로 초기화할 수 있는 데이터를 변경하는 데 사용되는 사용자 미리 정의된 패턴입니다. 이 변경 프로세스를 마스킹이라고 합니다.

마스킹은 의도적으로 데이터를 보호하는 프로세스이며 원래 형식을 재생성하기 위해 마스킹을 해제할 수 있습니다. JavaScript에는 replace()라는 기본 메소드가 있으며 이 메소드를 정규 표현식 regex와 함께 사용하여 데이터를 변경하고 마스킹할 수 있습니다.

JavaScript의 replace() 함수

JavaScript에서 replace()는 미리 정의된 메서드이며 문자열에서 이 메서드를 사용하여 해당 문자열의 정의된 부분을 다른 것으로 대체합니다. 선언된 전체 문자열에서 정의된 문자열 부분을 검색하여 지정된 값으로 바꿉니다.

원래 문자열은 replace() 메서드로 변경되지 않습니다. 업데이트된 문자열을 반환합니다.

예시:

let string = 'Delft stack is a good website to learn programming.';
let result = string.replace('good', 'best');  // it will replace good with best
console.log(result);

출력:

Delft stack is a best website to learn programming.

JavaScript의 정규 표현식

정규식은 특정 패턴을 검색하는 데 도움이 되는 일련의 문자입니다.

let regex = /hi/i

텍스트 검색 또는 텍스트 교체와 같은 작업에 사용할 수 있습니다. replace() 메소드에서 regex를 사용하면 기존 값을 다른 정의된 값으로 변경할 수 있습니다.

변경:

let regex = /hi/i
let text = 'hi world'
let result = text.replace(/hi/i, 'hello');  // it will replace hi with hello
console.log(result);

출력:

hello world

아래 예에서는 replace() 메서드와 regex를 함께 사용하여 초기화된 전화 번호에 마스킹을 수행합니다.

마스킹 변수 값의 예:

let regex = /^(\d{3})(\d{4})(\d{4}).*/
let value = '11122223333';
let altered = value.replace(regex, '$1-$2-$3');
console.log('original value ' + value)
console.log('altered value ' + altered)

출력:

original value 11122223333
altered value 111-2222-3333

위의 JavaScript 소스 코드에서 변수에 정규식 패턴을 초기화하고 value 변수에 숫자 데이터를 할당했습니다. 그런 다음 value 변수에서 replace() 메서드를 호출하고 데이터를 구분하는 -로 숫자 데이터를 변경하기 위해 정의된 정규식을 전달했습니다.

마지막으로 console.log()를 사용하여 로그 상자에 원본 데이터와 변경된 데이터의 결과와 비교를 표시했습니다.