Wijmo의 템플릿 리터럴 지원
페이지 정보
작성자 GrapeCity 작성일 2019-07-23 14:07 조회 2,682회 댓글 0건본문
관련링크
템플릿 리터럴은 ES2015/ES6에 도입된 훌륭한 JavaScript 기능입니다. 문자열 인터폴레이션(String Interpolation)으로 여러 줄 문자열을 만들 수 있으며 문자열에 포함된 작은 따옴표와 큰 따옴표를 쉽게 처리할 수 있습니다.
우리는 최근 Wijmo의 Globalize 클래스를 사용하여 템플릿 리터럴에 서식과 세계화를 추가하는 태그 함수를 작성하는 방법을 설명하는 포스팅을 게시했습니다.
(영문) 템플릿 리터럴 서식 및 세계화
이에 대한 피드백을 많이 받아 템플릿 리터럴 지원을 Wijmo 코어 모듈로 옮기기로 결정했습니다. 최신 버전의 Wijmo (2019 V2)에는 "glbz" 태그 기능이 추가되어 추가 코드 없이 템플릿 문자열과 함께 Globalize를 사용할 수 있습니다.
예를 들면 다음과 같습니다.
import { glbz } from "@grapecity/wijmo"; let price = 19.99; let tax = 0.1125; let total = glbz`The total price is <b>${price * (1 + tax)}:c2</b> (including ${tax}:p2 tax).`; let today = glbz`Today is <b>${new Date()}:'dddd, MMMM d, yyyy'</b>.`; document.getElementById('total-price').innerHTML = total; document.getElementById('today').innerHTML = today;
위의 템플릿 리터럴에는 각 필드 뒤에 서식 문자열이 포함됩니다. 서식 문자열은 콜론 기호(":")로 시작합니다. 공백이 포함된 형식 문자열은 따옴표로 묶어야 합니다.
결과는 다음과 같습니다.
The total price is $22.24 (including 11.25 % tax). Today is Monday, July 8, 2019.
"glbz" 태그 함수가 통화 및 백분율 서식을 값에 적용하는 방법에 주목해보세요. 서식은 각 템플릿 요소 뒤에 콜론 기호( ":")가 붙습니다.
값은 Wijmo의 현재 문화권을 사용하여 서식이 지정되므로 숫자 및 날짜 구분 기호, 통화 기호, 일, 월 이름이 모두 Globalize에 의해 자동으로 처리됩니다.
예를 들어, 현재 문화권을 이탈리아어 또는 독일어로 변경한 경우 결과는 다음과 같습니다.
import '@grapecity/wijmo.cultures/wijmo.culture.it'; ... The total price is 22,24 € (including 11,25% tax). Today is lunedì, luglio 8, 2019. import '@grapecity/wijmo.cultures/wijmo.culture.de'; ... The total price is 22,24 € (including 11,25 % tax). Today is Montag, Juli 8, 2019.
소수 구분 기호, 통화 기호, 요일 및 월 이름이 변경되었습니다.
glbz의 기능은 템플릿 리터럴에서 강력하게 사용될 수 있는 기능입니다. 도움이 되셨기를 바랍니다.
댓글목록
등록된 댓글이 없습니다.