Svelte는 템플릿 엔진을 통해 문자열 처리와 형식화를 쉽게 할 수 있습니다. 다음은 Svelte에서 문자열을 처리하고 형식화하는 몇 가지 방법입니다.

1. 문자열 보간 (String Interpolation) Svelte에서는 중괄호({}) 안에 변수나 표현식을 넣어 문자열에 동적으로 값을 삽입할 수 있습니다. 이를 문자열 보간(string interpolation)이라고 합니다.

예를 들어, 변수 name에 저장된 이름을 출력하는 코드를 작성해보겠습니다.

<script>
  let name = 'John';
</script>

<main>
  <h1>Hello {name}!</h1>
</main>

위의 예제에서는 {name} 부분이 변수 name의 값으로 대체되어 출력됩니다. 따라서 화면에는 “Hello John!”이라는 텍스트가 표시됩니다.

1. 문자열 연결 (String Concatenation) Svelte에서는 문자열을 + 연산자를 사용하여 연결(concatenate)할 수 있습니다.

<script>
  let firstName = 'John';
  let lastName = 'Doe';
</script>

<main>
  <p>{firstName + ' ' + lastName}</p>
</main>

위의 예제에서는 firstName과 lastName을 공백으로 구분하여 연결한 결과를 출력합니다. 따라서 화면에는 “John Doe”라는 텍스트가 표시됩니다.

1. 형식화 (Formatting) Svelte에서는 toLocaleString() 함수를 사용하여 숫자, 날짜 및 시간과 같은 값을 형식화할 수 있습니다. 이 함수는 JavaScript에서 제공하는 내장 함수로, 인터넷 브라우저의 지역 설정을 기반으로 값을 형식화합니다.

예를 들어, 숫자를 통화 형식으로 표시하는 코드를 작성해보겠습니다.

<script>
  let price = 1234.56;
</script>

<main>
  <p>The price is {price.toLocaleString('en-US', {style: 'currency', currency: 'USD'})}</p>
</main>

위의 예제에서는 toLocaleString() 함수를 사용하여 price 값을 통화 형식으로 형식화했습니다. 결과적으로 화면에는 “$1,234.56”라는 텍스트가 표시됩니다.

Svelte에서는 이 외에도 다양한 문자열 처리 및 형식화 방법을 제공합니다. 위의 예제들은 간단한 예시일 뿐이므로 필요에 따라 Svelte 문서를 참조하여 더 많은 기능을 확인할 수 있습니다.

또한, 자세한 내용은 Svelte 공식 문서를 참고하시기 바랍니다.