TypeScript에서 문자열에 특정 텍스트가 있는지 확인

TypeScript 문자열에 하위 문자열이 있는지 바로 확인하려면 includes()를 사용합니다. 결과는 불리언 값입니다. 일치하는 위치도 필요하면 indexOf()를 사용하고, 정규 표현식 패턴으로 조건을 검사하려면 search() 또는 RegExp.test()를 사용합니다. 텍스트를 명시적으로 정규화하거나 대소문자를 구분하지 않는 패턴을 사용하지 않는 한, 이 방법들은 대소문자를 구분합니다.

실행 가능한 예제는 TypeScript에서도 유효한 JavaScript 문법을 사용하므로, 별도의 트랜스파일 설정 없이 TypeScript 파일에 붙여 넣을 수 있습니다.

직접 하위 문자열을 확인할 때 includes() 사용

includes()는 간단한 불리언 결과가 필요할 때 사용합니다. 검색 대상 문자열에 지정한 하위 문자열이 있으면 true, 없으면 false를 반환합니다. 단순한 하위 문자열 확인에는 이처럼 읽기 쉬운 불리언 결과가 대개 적합합니다.

문자열에서 바로 확인하려면 검색할 문자열에 includes()를 호출합니다. 인수에는 찾으려는 텍스트를 지정합니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const message = "TypeScript string search";
const query = "string";
const containsQuery = message.includes(query);

console.log(containsQuery);

true

정확히 소문자로 된 하위 문자열이 message에 있으므로 결과는 true입니다. 예를 들어 대신 "String"을 검색하면 false가 반환됩니다. includes()는 대소문자를 바꾸거나 로캘을 고려해 비교하지 않습니다. 데이터에서 대소문자를 구분하지 않아야 한다면 마지막 섹션처럼 비교 전에 두 값을 정규화하세요.

일치 위치가 필요할 때 indexOf() 사용

indexOf()는 대상 문자열에서 하위 문자열이 처음 나타나는 위치를 0부터 세어 반환합니다. 일치하는 항목이 없으면 -1을 반환합니다. 이 결과를 불리언으로 바꾸려면 -1과 명시적으로 비교하세요. 숫자를 if 조건에 바로 넣으면 위치가 0인 일치를 놓칠 수 있습니다. 0은 거짓으로 평가되기 때문입니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const message = "TypeScript string search";
const query = "TypeScript";
const position = message.indexOf(query);
const containsQuery = position !== -1;

console.log(position, containsQuery);

0 true

여기서는 첫 문자의 위치가 0이므로 비교 결과가 일치를 올바르게 나타냅니다. 첫 번째 일치 항목 주변을 강조하거나 잘라내려면 위치를 사용하고, 존재 여부만 확인하면 includes()를 사용하세요. 두 방법 모두 텍스트를 그대로 비교하며 대소문자를 구분합니다. 이 문자열 메서드에서는 빈 검색 문자열도 존재하는 것으로 간주되므로, 빈 검색어를 일치로 처리하면 안 되는 경우 사용자 입력을 별도로 검증하세요.

정규 표현식 일치에는 search() 사용

search()는 첫 정규 표현식 일치 항목의 위치를 반환하며, 일치 항목이 없으면 -1을 반환합니다. 아래 예제처럼 RegExp 값을 전달하면 패턴을 명시할 수 있습니다. JavaScript는 문자열 인수도 정규 표현식으로 변환하므로, search()에 전달한 문자열은 패턴 문법으로 처리됩니다. includes()처럼 텍스트를 그대로 검색하지 않습니다. 숫자로 반환되는 결과는 indexOf()와 같은 방식으로 -1과 비교해야 합니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const message = "Order 42 is ready";
const position = message.search(/\d+/);

console.log(position);

6

/\d+/ 표현식은 숫자 하나 이상에 일치하며, search()는 해당 일치 항목의 시작 위치를 반환합니다. 예를 들어 문자열 인수 "42"도 정규 표현식으로 변환되어 숫자 패턴으로 일치합니다. 패턴 일치 여부만 불리언으로 확인하면 RegExp.test()가 의도를 더 직접적으로 표현합니다.

패턴을 확인할 때 RegExp.test() 사용

정규 표현식에서 test()를 호출하면 입력이 패턴과 일치하는지를 나타내는 불리언 값을 얻습니다. 패턴을 코드에 직접 작성한다면 정규 표현식 리터럴이 안전하고 간결한 선택입니다. 정규 표현식은 문자 클래스, 반복, 대안처럼 텍스트 그대로 검색해서는 표현할 수 없는 조건을 나타낼 수 있습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const message = "TypeScript string search";
const pattern = /TypeScript/;
const matches = pattern.test(message);

console.log(matches);

true

패턴이 변수에서 오는 경우 RegExp를 만들면 ., *, [ 같은 문자가 패턴 문법으로 처리됩니다. 변수 값을 문자 그대로 검색하려는 것이라면 먼저 해당 문자를 이스케이프하세요.

const userText = "price (USD)";
const escapedText = userText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const literalPattern = new RegExp(escapedText);
const found = literalPattern.test("The price (USD) is listed");

console.log(found);

true

이렇게 하면 userText의 문장 부호가 의도한 문자 그대로의 검색을 바꾸지 못합니다. test()를 단순한 불리언 확인에 반복해서 사용할 때는 g 및 y 플래그를 피하세요. 이 플래그를 사용하면 정규 표현식의 변경 가능한 lastIndex 상태에 따라 일치 결과가 달라집니다.

대소문자 구분과 여러 검색어 처리

비교 방법을 따로 지정하지 않으면 includes(), indexOf(), 정규 표현식은 대소문자를 구분합니다. 간단하게 대소문자를 무시하고 하위 문자열을 찾으려면 두 문자열을 같은 방식으로 정규화하세요. toLowerCase()는 많은 프로그래밍 식별자와 영어 텍스트에 적합하지만, 로캘을 고려한 언어 비교를 언제나 대신할 수 있는 것은 아닙니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const message = "TypeScript makes text checks clear";
const query = "TYPESCRIPT";
const containsQuery = message.toLowerCase().includes(query.toLowerCase());

const candidates = ["JavaScript", "TypeScript", "Python"];
const containsCandidate = candidates.some((item) =>
  message.includes(item)
);

console.log(containsQuery, containsCandidate);

true true

첫 번째 확인은 양쪽 값을 정규화하므로 대소문자를 무시합니다. some() 호출은 후보 중 하나라도 메시지에 있는지 확인하며, 일치 항목을 찾으면 검색을 멈춥니다. 나열한 용어가 모두 있어야 한다면 대신 every()를 사용하세요. 빈 하위 문자열은 모든 문자열에 일치하므로, 이 패턴을 사용하기 전에 빈 검색어를 허용할지 명확히 정하세요. 문자 그대로 존재하는지 확인하려면 includes(), 위치가 필요하면 indexOf(), 패턴이 조건이면 search() 또는 RegExp.test()를 선택하세요.