[JavsScript] 자바스크립트 문자열과 식 함께 다루기
2022. 5. 20. 20:19ㆍProgram/JavaScript
037_자바스크립트 문자열과 식 함께 다루기
[적용]
- 여러 문자열을 다루고 싶을 때
- 문자열 내 변수를 다루고 싶을 때
[문법]
구문 | 의미 |
문자열 + 문자열 + ... | 문자열 결합 |
`${문자열1}${문자열2}${문자열3} | 문자열 결합, 변수의 이용 |
[내용]
자바스크립트에서는 + 연산자를 문자열, 변수와 함께 사용할 수 있다.
const userName = '고양이';
const tag = '<div class="container">' + '안녕하세요' + userName + '님' + '</div>';
문자열과 변수를 추가할 때마다 매번 + 연산자를 사용하기는 번거로운 데다, 코드의 가독성도 떨어진다. 템플릿 문자열 ``을 사용해 이 문제를 해결할 수 있다. 템플릿 문자열은 여러 행의 문자열을 다루거나 문자열 내부에 식을 삽입할 수 있다.
const userName = '고양이';
const tag = `<div class="container">안녕하세요 ${userName} 님</div>`;
console.log(tag); // 결과: <div class="class="container">안녕하세요 고양이 님</div>
const str2 = `123 x 123은 ${123 * 123}입니다.`;
console.log(str2); // 결과: '123 x 123은 15129 입니다.'
[예시]
HTML 코드에서 h1과 p를 동적으로 작동하도록 하여 스크립트 실행 시의 날짜를 나타내는 샘플을 확인해 보자
HTML index.html
<body>
<main id="main">
</main>
</body>
JavaScript main.js
// 오늘 날짜 불러오기
const today = new Date();
// #main 내부의 HTML 코드를 동적으로 작동하도록 처리
document.querySelector('#main').innerHTML = `
<h1>오늘${today.getMonth() + 1}/${today.getDate()}의 날씨</h1>
<p>서울은 맑음</p>
`;
[실행 결과]
[JavaScript] 자바스크립트에서 문자열 다루기
[JavaScript] 자바스크립트에서 문자열의 길이(문자의 수)를 확인하고 싶을때 length()
[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()
[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)
[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)
[JavaScript] 자바스크립트에서 문자열에서 문자 다루기 (문자열에서 문자 추출하기)
[JavaScript] 자바스크립트 문자열에서 문자 다루기 (위치 지정하여 선택하기)
[JavaScript] 자바스크립트 문자열에서 문자 다루기 (글자수 지정하여 선택하기)
[JavaScript] 자바스크립트 지정 문자열 변환하기
[JavaScript] 자바스크립트 문자열 나누기
[JavaScript] 자바스크립트 문자열 합치기
[JavaScript] 자바스크립트 문자열의 대소문자 변환하기
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) (0) | 2022.05.24 |
---|---|
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기) (0) | 2022.05.24 |
[JavaScript] 자바스크립트 문자열의 대소문자 변환하기 (0) | 2022.05.20 |
[JavaScript] 자바스크립트 문자열 합치기 (0) | 2022.05.20 |
[JavaScript] 자바스크립트 문자열 나누기 (0) | 2022.05.19 |