웹사이트 검색

JavaScript에서 문자열로 작업하는 방법


소개

문자열은 문자, 숫자 또는 기호로 구성될 수 있는 하나 이상의 문자 시퀀스입니다. JavaScript의 문자열은 기본 데이터 유형이며 변경할 수 없습니다. 즉, 변경되지 않습니다.

문자열은 우리가 텍스트를 표시하고 작업하는 방식이고 텍스트는 컴퓨터를 통해 의사 소통하고 이해하는 주요 방법이므로 친숙해야 할 가장 기본적인 프로그래밍 개념 중 하나입니다.

이 기사에서는 문자열의 출력을 만들고 보는 방법, 문자열을 연결하는 방법, 문자열을 변수에 저장하는 방법, JavaScript에서 문자열 내에서 따옴표, 아포스트로피 및 줄 바꿈을 사용하는 규칙을 배웁니다.

문자열 출력 생성 및 보기

JavaScript에는 문자열을 작성하는 세 가지 방법이 있습니다. 작은따옴표( ), 큰따옴표(\ \) 또는 백틱(\\ \). 사용된 따옴표 유형은 양쪽에서 모두 일치해야 하지만 동일한 스크립트 전체에서 세 가지 스타일을 모두 사용할 수 있습니다.

큰따옴표와 작은따옴표를 사용하는 문자열은 사실상 동일합니다. 작은따옴표 또는 큰따옴표 문자열에 대한 규칙이나 공식적인 선호 사항이 없기 때문에 중요한 것은 프로젝트 프로그램 파일 내에서 일관성을 유지하는 것입니다.

'This string uses single quotes.';
"This string uses double quotes.";

문자열을 만드는 세 번째이자 최신 방법은 템플릿 리터럴입니다. 템플릿 리터럴은 백틱(억음 악센트라고도 함)을 사용하고 이 기사에서 다룰 몇 가지 추가 보너스가 있는 일반 문자열과 동일한 방식으로 작동합니다.

`This string uses backticks.`;

문자열 출력을 보는 가장 쉬운 방법은 console.log()를 사용하여 콘솔에 출력하는 것입니다.

console.log("This is a string in the console.");
Output
This is a string in the console.

값을 출력하는 또 다른 간단한 방법은 alert()를 사용하여 브라우저에 경고 팝업을 보내는 것입니다.

alert("This is a string in an alert.");

위의 줄을 실행하면 브라우저의 사용자 인터페이스에 다음과 같은 출력이 생성됩니다.

alert()는 경고를 닫는 것이 빨리 지루해질 수 있으므로 출력을 테스트하고 보는 덜 일반적인 방법입니다.

변수에 문자열 저장

JavaScript의 변수는 키워드 var, const 또는 let을 사용하여 값을 저장하는 명명된 컨테이너입니다. 문자열 값을 명명된 변수에 할당할 수 있습니다.

const newString = "This is a string assigned to a variable.";

이제 newString 변수에 문자열이 포함되어 있으므로 이를 참조하고 콘솔에 출력할 수 있습니다.

console.log(newString);

그러면 문자열 값이 출력됩니다.

Output
This is a string assigned to a variable.

변수를 사용하여 문자열을 나타내면 사용할 때마다 문자열을 다시 입력할 필요가 없으므로 프로그램 내에서 문자열을 사용하고 조작하는 것이 더 간단해집니다.

문자열 연결

연결은 두 개 이상의 문자열을 함께 결합하여 새 문자열을 만드는 것을 의미합니다. 연결하기 위해 + 기호로 표시되는 연결 연산자를 사용합니다. + 기호는 산술 연산과 함께 사용될 때 더하기 연산자이기도 합니다.

\Sea\\horse\ 사이에 간단한 연결 인스턴스를 만들어 봅시다.

"Sea" + "horse";
Output
Seahorse

연결은 문자열을 끝에서 끝까지 결합하여 결합하고 완전히 새로운 문자열 값을 출력합니다. Seahorse 사이에 공백을 두려면 문자열 중 하나에 공백 문자를 포함해야 합니다.

"Sea " + "horse";
Output
Sea horse

연결을 통해 문자열 값을 포함하는 문자열과 변수를 조인합니다.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author + ".";
Output
My favorite poem is The Wide Ocean by Pablo Neruda.

연결을 통해 두 개 이상의 문자열을 결합하면 프로그램 전체에서 사용할 수 있는 새 문자열이 생성됩니다.

템플릿 리터럴이 있는 문자열의 변수

템플릿 리터럴 기능의 한 가지 특별한 기능은 문자열 내에 식과 변수를 포함하는 기능입니다. 연결을 사용하는 대신 &#36 {} 구문을 사용하여 변수를 삽입할 수 있습니다.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;
Output
My favorite poem is The Wide Ocean by Pablo Neruda.

보시다시피 템플릿 리터럴에 식을 포함하는 것은 동일한 결과를 달성하는 또 다른 방법입니다. 이 경우 템플릿 리터럴을 사용하는 것이 작성하기 쉽고 편리할 수 있습니다.

문자열 리터럴 및 문자열 값

소스 코드에 작성하는 문자열이 따옴표나 백틱으로 둘러싸여 있지만 실제 인쇄된 출력에는 따옴표가 포함되어 있지 않음을 알 수 있습니다.

"Beyond the Sea"; 
Output
Beyond the Sea

이들 각각을 언급할 때 구별이 있습니다. 문자열 리터럴은 따옴표를 포함하여 소스 코드에 기록된 문자열입니다. 문자열 값은 출력에 표시되며 따옴표를 포함하지 않습니다.

위의 예에서 Beyond the Sea는 문자열 리터럴이고 Beyond the Sea는 문자열 값입니다.

문자열의 이스케이프 따옴표 및 아포스트로피

따옴표는 문자열을 나타내는 데 사용되기 때문에 문자열에 아포스트로피와 따옴표를 사용할 때는 특별히 고려해야 합니다. 예를 들어 작은따옴표 문자열 중간에 아포스트로피를 사용하려고 시도하면 문자열이 종료되고 JavaScript는 의도한 문자열의 나머지 부분을 코드로 구문 분석하려고 시도합니다.

아래의 Im 축소에서 아포스트로피를 사용하려고 시도하면 이를 확인할 수 있습니다.

const brokenString = 'I'm a broken string';

console.log(brokenString);
Output
unknown: Unexpected token (1:24)

큰따옴표로 묶인 문자열에서 따옴표를 사용하려고 시도하는 경우에도 동일하게 적용됩니다.

이러한 상황에서 발생하는 오류를 방지하기 위해 사용할 수 있는 몇 가지 옵션이 있습니다.

  • 반대 문자열 구문
  • 이스케이프 문자
  • 템플릿 리터럴

아래에서 이러한 옵션을 살펴보겠습니다.

대체 문자열 구문 사용

잠재적으로 끊어진 문자열의 격리된 경우를 피하는 쉬운 방법은 현재 사용 중인 것과 반대 문자열 구문을 사용하는 것입니다.

예를 들어 \로 빌드된 문자열의 아포스트로피입니다.

"We're safely using an apostrophe in double quotes."

로 빌드된 문자열의 인용 부호.

'Then he said, "Hello, World!"';

작은따옴표와 큰따옴표를 결합하는 방식으로 문자열 내에서 따옴표와 아포스트로피의 표시를 제어할 수 있습니다. 그러나 프로젝트 프로그래밍 파일 내에서 일관된 구문을 사용하기 위해 작업하는 경우 코드베이스 전체에서 유지 관리하기 어려울 수 있습니다.

이스케이프 문자(\\) 사용

백슬래시(\\) 이스케이프 문자를 사용하여 JavaScript가 따옴표를 문자열의 끝으로 해석하지 않도록 할 수 있습니다.

\\의 구문은 항상 작은따옴표이고 "의 구문은 문자열이 끊어질 염려 없이 항상 큰따옴표입니다.

이 방법을 사용하면 \로 작성된 문자열에 아포스트로피를 사용할 수 있습니다.

'We\'re safely using an apostrophe in single quotes.'

\로 작성된 문자열에 따옴표를 사용할 수도 있습니다.

"Then he said, \"Hello, World!\"";

이 방법은 조금 복잡해 보이지만 동일한 문자열 내에서 아포스트로피와 따옴표를 모두 사용해야 할 수 있으므로 이스케이프 처리가 필요합니다.

템플릿 리터럴 사용

템플릿 리터럴은 백틱으로 정의되므로 따옴표와 아포스트로피를 추가 이스케이프 처리나 고려 없이 안전하게 사용할 수 있습니다.

`We're safely using apostrophes and "quotes" in a template literal.`;

문자 이스케이프의 필요성을 방지하고 포함된 표현식을 허용하는 것 외에도 템플릿 리터럴은 다음 섹션에서 논의할 여러 줄 지원도 제공합니다.

대체 문자열 구문, 이스케이프 문자 사용 및 템플릿 리터럴 사용을 통해 문자열을 안전하게 만드는 여러 가지 방법이 있습니다.

긴 문자열과 개행

줄바꿈 문자나 캐리지 리턴을 문자열에 삽입하고 싶을 때가 있습니다. <코드> 또는 <코드> 이스케이프 문자를 사용하여 코드 출력에 줄 바꿈을 삽입할 수 있습니다.

const threeLines = "This is a string\nthat spans across\nthree lines.";
Output
This is a string that spans across three lines.

이것은 기술적으로 여러 줄에서 출력을 얻는 데 작동합니다. 그러나 한 줄에 매우 긴 문자열을 작성하면 읽고 작업하기가 매우 어려워집니다. 연결 연산자를 사용하여 여러 줄에 문자열을 표시할 수 있습니다.

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

여러 문자열을 연결하는 대신 \\ 이스케이프 문자를 사용하여 새 줄을 이스케이프할 수 있습니다.

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

참고: 이 방법은 일부 브라우저 및 축소기에서 문제를 일으킬 수 있으므로 권장되지 않습니다.

코드를 더 읽기 쉽게 만들기 위해 템플릿 리터럴 문자열을 대신 사용할 수 있습니다. 이를 통해 줄 바꿈이 포함된 긴 문자열을 연결하거나 이스케이프할 필요가 없습니다. 문자열과 줄 바꿈이 유지됩니다.

const threeLines = `This is a string
that spans across
three lines.`;
Output
This is a string that spans across three lines.

서로 다른 코드 기반이 다양한 표준을 사용할 수 있으므로 여러 줄에 걸쳐 있는 새 줄 및 문자열을 만드는 모든 방법을 알고 있어야 합니다.

결론

이 기사에서는 작은따옴표와 큰따옴표를 사용하여 문자열 리터럴 생성 및 표시, 템플릿 리터럴 생성, 연결, 이스케이프 및 문자열 값을 변수에 할당하는 것부터 JavaScript에서 문자열 작업의 기본 사항을 살펴보았습니다.