15. JavaScript 텍스트 포맷팅 | 웹 개발 기초

점묘화 스타일, dall-e

 

JavaScript 텍스트 포맷팅 가이드

 

01. JavaScript 문자열

1) JavaScript에서 텍스트 포맷팅의 중요성

JavaScript에서 텍스트 포맷팅은 웹 애플리케이션과 사용자 간의 상호작용을 향상시키는 중요한 역할을 합니다. 텍스트 포맷팅을 통해 문자열 데이터를 처리하고, 표시하고, 조작할 수 있습니다. 이는 사용자 인터페이스의 품질을 높이고, 데이터 처리를 더 효율적으로 만들며, 다양한 텍스트 기반 기능을 구현하는 데 필수적입니다.

2) 문자열 리터럴과 객체

문자열 리터럴

문자열 리터럴은 큰따옴표(" ") 또는 작은따옴표(' ')를 사용하여 정의할 수 있습니다. 문자열 리터럴은 가볍고 사용하기 쉽습니다.

let greeting = "Hello, World!";
console.log(greeting);  // 출력: Hello, World!

문자열 객체

문자열 객체는 new String() 생성자를 사용하여 생성됩니다. 문자열 객체는 문자열 리터럴과 달리 객체로 취급되며, 다양한 메서드를 사용할 수 있습니다.

let objGreeting = new String("Hello, World!");
console.log(objGreeting);  // 출력: [String: 'Hello, World!']
console.log(typeof objGreeting);  // 출력: object

3) 문자열 메서드

JavaScript의 문자열 메서드는 문자열을 조작하고 분석하는 데 매우 유용합니다. 아래는 주요 문자열 메서드와 그 사용 예제입니다.

charAt(), charCodeAt(), codePointAt()

• charAt(): 특정 인덱스에 위치한 문자를 반환합니다.

  let str = "JavaScript";
  console.log(str.charAt(0));  // 출력: J

• charCodeAt(): 특정 인덱스에 위치한 문자의 UTF-16 코드를 반환합니다.

  console.log(str.charCodeAt(0));  // 출력: 74

• codePointAt(): 특정 인덱스에 위치한 문자의 전체 유니코드 코드 포인트를 반환합니다.

  console.log(str.codePointAt(0));  // 출력: 74

indexOf(), lastIndexOf()

• indexOf(): 문자열에서 특정 하위 문자열이 처음 나타나는 인덱스를 반환합니다.

  console.log(str.indexOf('a'));  // 출력: 1

• lastIndexOf(): 문자열에서 특정 하위 문자열이 마지막으로 나타나는 인덱스를 반환합니다.

  console.log(str.lastIndexOf('a'));  // 출력: 3

startsWith(), endsWith(), includes()

• startsWith(): 문자열이 특정 하위 문자열로 시작하는지 확인합니다.

  console.log(str.startsWith('Java'));  // 출력: true

• endsWith(): 문자열이 특정 하위 문자열로 끝나는지 확인합니다.

  console.log(str.endsWith('Script'));  // 출력: true

• includes(): 문자열이 특정 하위 문자열을 포함하는지 확인합니다.

  console.log(str.includes('Script'));  // 출력: true

concat(), split(), slice()

• concat(): 두 문자열을 결합하여 새 문자열을 반환합니다.

  let str1 = "Hello";
  let str2 = "World";
  console.log(str1.concat(", ", str2));  // 출력: Hello, World

• split(): 문자열을 지정된 구분자를 기준으로 분할하여 배열로 반환합니다.

  let words = str.split(' ');
  console.log(words);  // 출력: ["JavaScript"]

• slice(): 문자열의 일부를 추출하여 새 문자열을 반환합니다.

  console.log(str.slice(0, 4));  // 출력: Java

substring(), substr()

• substring(): 문자열의 일부를 추출하여 새 문자열을 반환합니다.

  console.log(str.substring(0, 4));  // 출력: Java

• substr(): 문자열의 일부를 추출하여 새 문자열을 반환합니다.

  console.log(str.substr(0, 4));  // 출력: Java

match(), matchAll(), replace(), replaceAll(), search()

• match(): 정규 표현식과 일치하는 부분을 배열로 반환합니다.

  let regex = /a/g;
  console.log(str.match(regex));  // 출력: ["a", "a"]

• matchAll(): 정규 표현식과 일치하는 모든 부분을 반복자(iterator)로 반환합니다.

  let matches = str.matchAll(regex);
  console.log(Array.from(matches));  // 출력: [["a"], ["a"]]

• replace(): 문자열의 일부를 다른 문자열로 대체합니다.

  console.log(str.replace('Java', 'Type'));  // 출력: TypeScript

• replaceAll(): 문자열의 모든 일치 부분을 다른 문자열로 대체합니다.

  console.log(str.replaceAll('a', 'A'));  // 출력: JAvAScript

• search(): 정규 표현식과 일치하는 첫 번째 부분의 인덱스를 반환합니다.

  console.log(str.search('a'));  // 출력: 1

toLowerCase(), toUpperCase()

• toLowerCase(): 문자열을 소문자로 변환합니다.

  console.log(str.toLowerCase());  // 출력: javascript

• toUpperCase(): 문자열을 대문자로 변환합니다.

  console.log(str.toUpperCase());  // 출력: JAVASCRIPT

normalize(), repeat(), trim()

• normalize(): 문자열을 유니코드 정규화 형식으로 반환합니다.

  let accentedStr = "Café";
  console.log(accentedStr.normalize());  // 출력: Café

• repeat(): 문자열을 지정한 횟수만큼 반복하여 새 문자열로 반환합니다.

  console.log(str.repeat(3));  // 출력: JavaScriptJavaScriptJavaScript

• trim(): 문자열의 앞뒤 공백을 제거합니다.

  let paddedStr = "  Hello  ";
  console.log(paddedStr.trim());  // 출력: Hello

 

02. 템플릿 리터럴

1) 템플릿 리터럴의 기본

템플릿 리터럴(Template Literals)은 백틱(`)을 사용하여 문자열을 정의하는 방법으로, 문자열 내에서 표현식을 삽입하고 멀티라인 문자열을 작성할 수 있는 편리한 기능을 제공합니다.

기본 예제

템플릿 리터럴을 사용하면 문자열 내에서 변수와 표현식을 손쉽게 삽입할 수 있습니다. ${} 구문을 사용하여 변수나 표현식을 포함할 수 있습니다.

let name = "Alice";
let age = 25;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);  // 출력: Hello, my name is Alice and I am 25 years old.

2) 멀티라인 문자열

템플릿 리터럴을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다. 백틱(`)을 사용하면 줄바꿈을 포함한 문자열을 작성할 수 있습니다.

let multiLineString = `This is a string
that spans multiple
lines.`;
console.log(multiLineString);
// 출력: This is a string
//       that spans multiple
//       lines.

3) 임베디드 표현식

템플릿 리터럴은 문자열 내에서 표현식을 직접 삽입할 수 있게 해줍니다. 표현식은 중괄호(`{}`) 안에 넣어 사용합니다. 이 표현식은 문자열이 평가될 때 실행됩니다.

기본 예제

let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);  // 출력: The sum of 5 and 10 is 15.

함수 호출 예제

템플릿 리터럴 안에서 함수를 호출하고 그 결과를 문자열에 삽입할 수도 있습니다.

function getGreeting(name) {
  return `Hello, ${name}!`;
}

let greetingMessage = `Greeting message: ${getGreeting("Alice")}`;
console.log(greetingMessage);  // 출력: Greeting message: Hello, Alice!

조건부 표현식 예제

템플릿 리터럴 내에서 조건부 표현식을 사용할 수도 있습니다.

let isMember = true;
let welcomeMessage = `Welcome, ${isMember ? "member" : "guest"}!`;
console.log(welcomeMessage);  // 출력: Welcome, member!

 

03. 국제화 (Intl 객체)

1) Intl.DateTimeFormat을 통한 날짜와 시간 포맷팅

Intl.DateTimeFormat 객체는 날짜와 시간을 로케일에 맞게 포맷팅하는 기능을 제공합니다. 다양한 포맷 옵션을 사용하여 날짜와 시간을 원하는 형태로 표현할 수 있습니다.

기본 예제

let date = new Date();
let options = { year: 'numeric', month: 'long', day: 'numeric' };
let formattedDate = new Intl.DateTimeFormat('ko-KR', options).format(date);
console.log(formattedDate);  // 출력: 2024년 7월 1일

시간 포함 예제

let optionsWithTime = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
let formattedDateTime = new Intl.DateTimeFormat('ko-KR', optionsWithTime).format(date);
console.log(formattedDateTime);  // 출력: 2024년 7월 1일 오전 10:30

2) Intl.NumberFormat을 통한 숫자 포맷팅

Intl.NumberFormat 객체는 숫자를 로케일에 맞게 포맷팅하는 기능을 제공합니다. 통화, 백분율 등 다양한 포맷 옵션을 사용할 수 있습니다.

기본 예제

let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('en-US').format(number);
console.log(formattedNumber);  // 출력: 1,234,567.89

통화 포맷 예제

let currencyOptions = { style: 'currency', currency: 'USD' };
let formattedCurrency = new Intl.NumberFormat('en-US', currencyOptions).format(number);
console.log(formattedCurrency);  // 출력: $1,234,567.89

백분율 포맷 예제

let percentageOptions = { style: 'percent', minimumFractionDigits: 2 };
let formattedPercentage = new Intl.NumberFormat('en-US', percentageOptions).format(0.1234);
console.log(formattedPercentage);  // 출력: 12.34%

3) Intl.Collator를 통한 문자열 비교와 정렬

Intl.Collator 객체는 문자열을 로케일에 맞게 비교하고 정렬하는 기능을 제공합니다. 이 객체를 사용하면 로케일에 따라 문자열을 올바르게 비교하고 정렬할 수 있습니다.

기본 예제

let collator = new Intl.Collator('ko-KR');
let words = ['가나다', '다라마', '나가사'];
words.sort(collator.compare);
console.log(words);  // 출력: ['가나다', '나가사', '다라마']

대소문자 무시 정렬 예제

let caseInsensitiveCollator = new Intl.Collator('en', { sensitivity: 'base' });
let mixedCaseWords = ['apple', 'Banana', 'cherry'];
mixedCaseWords.sort(caseInsensitiveCollator.compare);
console.log(mixedCaseWords);  // 출력: ['apple', 'Banana', 'cherry']

 

04. 실용적인 예제

1) 디지털 시계 구현

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>디지털 시계</title>
  <style>
    .clock {
      font-size: 2em;
      font-family: 'Courier New', Courier, monospace;
      text-align: center;
      margin-top: 20%;
    }
  </style>
</head>
<body>
  <div class="clock" id="clock"></div>
  <script>
    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
    }

    setInterval(updateClock, 1000);
    updateClock(); // 페이지 로드 시 즉시 시계를 업데이트
  </script>
</body>
</html>

2) 다양한 날짜 형식 변환

function formatDate(dateStr) {
  const date = new Date(dateStr);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 1을 더합니다.
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

const formattedDate = formatDate('2024-07-01');
console.log(formattedDate); // 출력: 01/07/2024

3) Math 객체를 사용한 계산 예제

삼각 함수 계산

const angle = Math.PI / 4; // 45도
const sinValue = Math.sin(angle);
const cosValue = Math.cos(angle);
console.log(`sin(45°) = ${sinValue}`); // 출력: sin(45°) = 0.7071067811865475
console.log(`cos(45°) = ${cosValue}`); // 출력: cos(45°) = 0.7071067811865475

제곱근 계산

const number = 16;
const sqrtValue = Math.sqrt(number);
console.log(`sqrt(${number}) = ${sqrtValue}`); // 출력: sqrt(16) = 4

최대값과 최소값 계산

const values = [3, 7, 2, 8, 5];
const maxValue = Math.max(...values);
const minValue = Math.min(...values);
console.log(`max = ${maxValue}`); // 출력: max = 8
console.log(`min = ${minValue}`); // 출력: min = 2

랜덤 숫자 생성

const randomValue = Math.random(); // 0과 1 사이의 난수 생성
console.log(`random value = ${randomValue}`);

 

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

2024.07.04 - [Study] - 07. CSS Grid Layout 가이드 | 웹 개발 기초

07. CSS Grid Layout 가이드 | 웹 개발 기초

2024.07.03 - [Study] - 05. CSS 박스 모델 학습 | 웹 개발 기초

05. CSS 박스 모델 학습 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)