최근에 알았던 JavaScript의 방법과 기법은요.

개요

안녕하세요, 저는 토미입니다.
제목과 같이 오늘은 JavaScript의 이야기입니다.솔직히 별거 아닌 내용인데 요즘 이런 방법과 기법을 알게 되니 쉽고 감동적인 말을 쓰려고 한다.

String.prototype.padStart()

String.prototype.padStart() - JavaScript | MDN
기본형

"1".padStart(2, 0); //=> "01"
"12".padStart(2, 0); //=> "12"

↓ 갑자기 생각난 사용법은 날짜 등 0으로 채우는 것이 있나요?
달을 비운 예

const date = new Date();
console.log(
  (date.getMonth() + 1).toString().padStart(2, 0)
); //=> "02"

그나저나 0만 채우면 슬라이스도 사용할 수 있어요.나도 이게 마음에 들어.
String.prototype.slice() - JavaScript | MDN
슬라이스 사용 예

const date = new Date();
console.log(
  ("0" + (date.getMonth() + 1)).slice(-2)
); //=> "02"

다만, 나는 전자가 영어 단어로 무엇을 하는지 비교적 직관적이고 알기 쉽다고 생각한다.응?직감이요?그렇게 생각하는 사람은 충전재의pad(pad)부터 생각해보면 느낌이 있을 거예요.어깨 패드, 브래지어 같은 거.

Template literals (Template strings)

Template literals (Template strings) - JavaScript | MDN
만약 이러한 줄임말을 사용한다면 문자열에 표현식을 포함할 수 있습니다.
사용 예 1 - 방법 호출

console.log(`現在は${new Date().getFullYear()}年です。`);
//=> 現在は2019年です。

예제 2 - 변수

const nowYear = new Date().getFullYear();
console.log(`現在は${nowYear}年です。`);
//=> 現在は2019年です。

예3 - 계산 등

console.log(`現在は${2017 + 1 + 1}年です。`);
//=> 現在は2019年です。

다음은 ES5 이전에 자주 사용된 문자열을 연결하는 방법입니다.
ES6 이전 문자열 연결

const nowYear = new Date().getFullYear();
console.log("現在は" + nowYear + "年です。");
//=> 現在は2019年です。

수량이 적으면 이렇게 해도 되지만 수량이 늘어나 세그먼트가 가늘어지면 차이가 뚜렷해진다.
백문이 불여일견이니 이쪽을 보세요.
템플릿 상수와 일반 문자열 연결 비교

//テンプレートリテラル
const template = `現在は${nowYear}年${month}月${date}日(${day})です。`
//従来の文字列連結
const concat   = "現在は" + nowYear + "年" + month + "月" + date + "日" + day + "です。"

나는 템플릿 소양이 뚜렷하고 읽기 쉽다고 생각한다.덧붙여 말하자면, 후자는 쓰기도 매우 번거롭다. 소홀히 하면 문자열의 폐회로를 잊어버리고, 이것은 더욱 번거롭다.

Support

Can I use... pad-start-end

Can I use... template-literals

오늘 소개한 물건은 모두 IE를 사용할 수 없다.정말 IE를 쓰고 싶으면등의 변압기는 필수적이다.IE, WEB 개발자들 정말 울리네.
그럼에도 불구하고 처음 ES6를 접했을 때는 베벨을 놓을 수 없었지만, 최근 최신 버전인 크롬과 Firefox는 정상적으로 작동할 수 있게 됐다.
모르시는 분들이 계시면 편하고 기회가 된다면 꼭 사용해 보세요.
그럼