JavaScript에서 문자열 형식을 지정하는 방법은 무엇입니까?

JavaScript에서 문자열은 한 쌍의 작은따옴표 또는 큰따옴표로 묶인 문자 그룹입니다. JavaScript에서 문자열 형식을 지정하는 방법에는 여러 가지가 있습니다.

특정 메서드나 연산자를 사용하여 문자열을 결합할 수 있습니다. 특정 작업을 수행하여 언제 어디서 어떤 문자열이 나타나는지 결정할 수도 있습니다.

MAKEUSEOF 오늘의 비디오

연결 방법과 템플릿 리터럴을 사용하여 JavaScript 문자열의 형식을 지정하는 방법을 알아보세요.

문자열 연결

JavaScript를 사용하면 여러 접근 방식을 사용하여 문자열을 연결할 수 있습니다. 유용한 접근 방식은 연결() 방법. 이 방법은 두 개 이상의 문자열을 사용합니다. 단일 호출 문자열을 사용하고 하나 이상의 문자열을 인수로 사용합니다.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName.concat(" ", lastName); 
console.log(stringVal);

여기서 concat은 문자열 인수(공백 및 lastName)를 호출 문자열(firstName)에 결합합니다. 그런 다음 코드는 결과 새 문자열을 변수(stringVal)에 저장하고 브라우저 콘솔에 새 값을 인쇄합니다. :

문자열 컬렉션을 연결하는 또 다른 방법은 더하기 연산자를 사용하는 것입니다. 이 방법을 사용하면 문자열 변수와 문자열 리터럴을 결합하여 새 문자열을 만들 수 있습니다.

const firstName = "John"; 
const middleName = "Mike"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName + " " + middleName + " " + lastName; 
console.log(stringVal);

위의 코드는 콘솔에 다음 출력을 인쇄합니다.

JavaScript 문자열을 연결하는 세 번째 접근 방식은 더하기 및 등호를 사용해야 합니다. 이 방법을 사용하면 기존 문자열 끝에 새 문자열을 추가할 수 있습니다.

컴퓨터가 인터넷에 연결되지 않습니다

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName; 
stringVal += " "; 
stringVal += lastName; 
  
console.log(stringVal);

이 코드는 공백과 lastName 변수 값을 firstName 변수에 추가하여 다음 출력을 생성합니다.

템플릿 리터럴

템플릿 리터럴은 JavaScript 문자열의 형식을 지정할 수 있는 ES6 기능입니다. 템플릿 리터럴은 한 쌍의 백틱(`)을 사용하여 문자열을 표시합니다. 이 문자열 형식 지정 방법을 사용하면 JavaScript에서 더 깨끗한 여러 줄 문자열을 표시할 수 있습니다.

let html; 
  
html = `<ul> 
       <li> Name: John Doe </li> 
       <li> Age: 24 </li> 
       <li> Job: Software Engineer </li> 
       </ul>`; 
  
document.body.innerHTML = html;

위의 JavaScript 코드는 HTML 브라우저에서 세 항목의 목록을 인쇄하려면:

Apple Watch를 처음 충전하는 데 얼마나 걸립니까?

템플릿 리터럴 없이(또는 템플릿 리터럴 이전) 동일한 출력을 얻으려면 따옴표를 사용해야 합니다. 그러나 템플릿 리터럴에서와 같이 코드를 여러 줄로 확장할 수 없습니다.

let html; 
  
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>"; 
  
document.body.innerHTML = html;

문자열 보간

템플릿 리터럴을 사용하면 보간이라는 프로세스를 통해 JavaScript 문자열에서 표현식을 사용할 수 있습니다. 문자열 보간을 사용하면 다음을 사용하여 문자열에 표현식이나 변수를 포함할 수 있습니다. ${표현식} 자리 표시자. 여기에서 JavaScript 템플릿 리터럴의 가치가 진정으로 분명해집니다.

let userName = "Jane Doe"; 
let age = 21; 
let job = "Web Developer"; 
let experience = 3; 
  
let html; 
  
html = `<ul> 
       <li> Name: ${userName} </li> 
       <li> Age: ${age} </li> 
       <li> Job Title: ${job} </li> 
       <li> Years of Experience: ${experience} </li> 
       <li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li> 
       </ul>`; 
  
document.body.innerHTML = html;

위의 코드는 콘솔에 다음 출력을 생성합니다.

의 처음 네 가지 주장 ${표현식} 자리 표시자는 문자열 변수이지만 다섯 번째는 조건식입니다. 표현식은 변수(경험) 중 하나의 값에 의존하여 브라우저에 표시해야 할 내용을 지정합니다.

JavaScript를 사용하여 웹페이지의 요소 서식 지정

JavaScript는 웹 페이지 개발과의 기능적 연관성 외에도 HTML과 함께 작동하여 웹 페이지의 디자인 및 레이아웃에 영향을 줍니다. 템플릿 리터럴의 경우와 같이 웹 페이지에 표시되는 텍스트를 조작할 수 있습니다.

HTML을 이미지로 변환하여 웹 페이지에 표시할 수도 있습니다.