[ES6] String

sujip·2023년 6월 14일

ES6

목록 보기

3/8

Template literal

1. variable을 가진 문자열 쓰는 방법에 대한 개선.

``(백틱) 사용하기.

template literal 사용X

ex)
const sayHi = (aNAme = "anon") => 
  "hello " + aName + " lovely to have you";
console.log(sayHi());

template literal 사용O

ex)
const sayHi = (aNAme = "anon") => 
  `hello ${aName} lovely to have you`;
console.log(sayHi());

-> 1번 코드 = 2번 코드

3. string 안에서 function 실행 시키기.

ex)
const add = (a, b) => a + b;
console.log(`hello how are you ${add(6,6)}`);
/* 출력값 = hello how are you 12 */
/* 이때, function에 argument를 주지 않으면, 소스 코드 전체가 보인다. */
/* console.log(`hello how are you ${add}`); 
-> 출력값 = hello how are you (a,b) => a + b */

2. JS 안에서 HTML element 생성.

template literal 사용X

ex)
const wrapper = document.querySelector(".wrapper");
const addWelcome = () => {
  const div = document.createElement("div");
  const h1 = document.createElement("h1");
  h1.innerText = "Hello";
  h1.className = "sexyTitle";
  div.append(h1);
  wrapper.append(div);
};
setTimeout(addWelcome, 5000);
/* 위 코드와 같이, JS 안에서 HTML element를 만들때, 많은 코드가 필요하다.
이때, 코드를 단축시키기 위해 tmeplate literal을 사용한다. */

template literal 사용O

ex)
const wrapper = document.querySelector(".wrapper");
const addWelcome = () => {
  const div = `
    <div class="hello">
      <h1 class="title">Hello</h1>
    </div>
  `;
  wrapper.innerHTML = div;
};
setTimeout(addWelcome, 5000);
/* ``(백틱)은 enter(줄바꿈)와 space(공백)을 모두 지원한다. */

+ template literal을 사용한 html fragment 관련 예제.

friends에 좋아하는 친구들 목록 만들기.
ex)
const wrapper = document.querySelector(".wrapper");
cosnt friends = [“me”, “lynn”, “dal”, “mark”];
const list = `
    <h1>People i love</h1>
    <ul>
        ${friends.map(friend => `<li>${friend}<li>`).join(“ ”)}
    </ul>
`;
/* join()을 사용한 이유, ","를 없애기 위해 */
wrapper.innerHTML = list;
Array.prototype.join( ) : array의 모든 요소를 연결해 하나의 문자열로 만든다.

join( )을 사용하지 않았을 때, 예시 사진.

join( )을 사용했을 때, 예시 사진.

3. Styled component에서 사용하기.

1) styled component가 동작하는 방식

styled component : 리액트를 위한 라이브러리.
( + JS에서 CSS를 쓸수 있게 하고, HTML을 얻을 수 있다.)

1개의 표현식을 사용할 때,
ex)
const styled = (css) => console.log(css);
styled();
/* ()안에 css를 넣으면 작동한다. */
/* ex) styled("border-radius: 10px;"); */
2개 이상의 표현식을 사용할 때,(=enter를 쳐야할때), ""이 아닌 ``(백틱)을 사용해야 제대로 작동한다.
ex)
styled(`border-radius: 10px;
  color: blue;`);
2번의 예제 코드에서 ( )를 제거하면, ``안의 표현식이 argument로 들어간다.
ex)
styled`border-radius: 10px;
  color: blue;`;
/* styled()와 마찬가지로 function은 잘 작동되지만, argument가 바뀐 상태. */
/* string인 하나의 argument가 나오게 된다.
(=위의 array에는 하나의 argument만 있고, 작성한 string이 나오게 된다. */
//
즉,
styled(); = styled`string`;
/* styled`string`; = string으로 function을 호출하는 방법. */
/* styled`string`;로 function을 호출하면, string은 argument로 들어가게 된다. */
``안의 표현식이 arugment로 들어간 예시 사진.

2) styled component 사용해 html element와 css를 받고, css를 적용한 element를 return하는 function 만들기.

Error 코드

ex)
const styled = (aElement) => {
  const el = document.createElement(aElement);
  return el;
};
const title = styled("div")`border-radius: 10px; 
  color: blue;`;
/* = Error! */
/* Error가 나는 이유, 
const title = styled("div")`border-radius: 10px; color: blue;`;
= sytled("div")()이기때문에 function을 두번 호출하는 것이다.
또한, styled("div")는 el를 return하고 있다. */
/* 여기서 styled("div")는 하나의 표현식. 즉, styled("div") = <div></div> 
-> 따라서, 정상 작동하기위해 function 안에 function을 return 해야한다. */

정상 코드( = 1번 Error 코드 수정)

ex)
const styled = (aElement) => {
  const el = document.createElement(aElement);
  return args => {
    const styled = args[0];
    el.style = styles;
    return el;
  };  
};
const title = styled("div")`
  border-radius: 10px; 
  color: blue;
`;

위 코드 출력 예시 사진.

또 다른 예시 코드.

ex)
const styled = (aElement) => {
  const el = document.createElement(aElement);
  return args => {
    const styled = args[0];
    el.style = styles;
    return el;
  };  
};
const title = styled("div")`
  background-color: red;
  color: blue;
`;
const subtitle = styled("span")`
  color: green;
`;
title.innerText = "We just cloned";
subtitle.innertText = "Styled Component";
document.body.append(title, subtitle);

위 코드 출력 예시 사진.

String method

1. String.prototype.includes( )

: 찾고 싶은 string이 포함되어 있는 지 확인하고, 결과를 true or false로 반환한다.
ex)
const isEmail = email => email.includes("@");
console.log(isEmail("nico@nomadcoders.co"));
/* 포함한다면 true, 포함하지 않는다면 false를 반환한다. */

2. String.prototype.repeat( )

: 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다.
ex)
const CC_NUMBER = "6060";
const displayName = `${"*".repeat(10)}${CC_NUMBER}`;
console.log(displayName);
/* 출력값 = **********6060 */

3. String.prototype.startsWith( )

: 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true or false로 반환한다.
ex)
const naem = "Mr.Nicolas";
console.log(name.startsWith("MR"));
/* 출력값 = true */
String.prototype.endWith( )
: 어떤 문자열이 특정 문자로 끝나는지 확인하여 결과를 true or false로 반환한다.