[ JS ] Strings

🔴  Using BackQuote

⚪  ` `를 사용하여 문자열과 변수를 + 연산자 없이 표현할 수 있다.

 

const add = (a, b) => a + b;

console.log(`hello how are you ${add(6, 6)}`);

 

🟠  HTML Fragments

 

const wrapper = document.querySelector(".wrapper");

const addWelcome = () => {
  const div = `
    <div class="hello">
      <h1 class="title">Hello</h1>
    </div>
  `;
  wrapper.innerHTML = div;
};

 

const wrapper = document.querySelector(".wrapper");

const friends = ["me", "lin", "hyun", "hun"];

const list = `
  <h1>People i love</h1>
  <ul>
    ${friends.map(friend => `<li>${friend}</li>`).join("")};
  </ul>
`;

wrapper.innerHTML = list;

 

🟡  Cloning Styled Components

리액트의 Styled Components와 비슷한 방식으로 바닐라 자바스크립트에서 HTML 요소를 추가하고, CSS를 적용할 수 있는 방법을 알아보도록 하자.

 

const styled = aElement => {
  const el = document.createElement(aElement);
  return args => {
    const styles = args[0];
    el.style = styles;
    return el;
  };
};

const title = styled("h1")`
  background-color: red;
  color: blue;
`;

const subtitle = styled("span")`
  color: green;
`;

title.innerText = "We just cloned";
subtitle.innerText = "Styled Components";

document.body.append(title, subtitle);

 

🟢  Useful String Functions!

⚪  includes

 

const isEmail = email => email.includes("@");

console.log(isEmail("ryong@gmail.com"));  // true

⚪  repeat

 

const CC_NUMBER = "6060";

const displayName = `${"*".repeat(10)}${CC_NUMBER}`;

console.log(displayName);  // **********6060

⚪  startsWith && endsWith

 

const name = "Mr. Ryong";

console.log(name.startsWith("Mr");  // true
console.log(name.endsWith("Ryong");  // true

⚪  padStart && padEnd

 

"5".padStart(5, "x");
// xxxxx5

"5".padEnd(5, "x");
// 5xxxx

let hours = 8;
let minutes = 7;
let seconds = 28;

console.log(`${hours.padStart(2, "0").padEnd(3, "h")}:
             ${minutes.padStart(2, "0").padEnd(3, "m")}:
             ${seconds.padStart(2, "0").padEnd(3, "s")}`);
// 08h:07m:28s

⚪  trim, trimStart, trimEnd

⚪  form 입력을 받은 데이터를 처리할 때 유용하다.

 

let name = "     jeong seung   ryong     ";

name.trimStart();
// "jeong seung   ryong     "

name.trimEnd();
// "     jeong seung   ryong"

name.trim();
// "jeong seung   ryong"