정보실

웹학교

정보실

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

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

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.

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

JavaScript Alert String Output 


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";
Output
Seahorse

연결은 문자열을 끝에서 끝까지 결합하여 결합하여 새로운 문자열 값을 출력합니다. 단어 Sea와 horse 사이에 공백을 두려면 문자열 중 하나에 공백 문자를 포함해야 합니다.


"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.

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


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


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


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는 나머지 문자열을 코드로 구문 분석하려고 시도합니다.


아래 I 'm 수축에서 아포스트로피를 사용하여 이를 확인할 수 있습니다.


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.`;

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


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


긴 문자열과 줄 바꿈 


줄 바꿈 문자를 삽입하거나 문자열에 캐리지 리턴을 삽입하려는 경우가 있습니다. \ n 또는 \ r 이스케이프 문자는 코드 출력에 줄 바꿈을 삽입하는 데 사용할 수 있습니다.


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로 문자열을 다루는 기본 사항을 살펴 보았습니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 52회 ]  작성일19-10-27 15:49

웹학교