문자열

Template Literal

• 기본적인 문자열 합치기
• 사용 예시

    //1. 번거롭다.
    //2. 헷갈릴 위험도 크다.
    const test = (text = "test") => "execute " + text +" !!!";
    console.log(test());    //출력 : execute test !!!
    

• 백틱과 함께 쓰기 - 기본편 (` : 물결표랑 같이 있는 기호)
• 사용 예시

    const test = (text = "test") => `execute ${text} !!!`;
    console.log(test());    //출력 : execute test !!!
    

• 백틱과 함께 쓰기 - 응용편 (함수 사용)
• 사용 예시

    const add = (a, b) => a + b;
    const test = (text = "test") => `execute ${add(1, 6)} !!!`;
    console.log(test());    //출력 : execute 7 !!!
    

HTML 태그 & Template Literal

• 기본 사용법

    const testDiv = document.getElementById("testDiv");
    const span = `<span>This is HTML Tag + Template Literal !!!</span>`;
    testDiv.innerHTML = span;
    

• 응용법

    const testArray = ["a", "b", "c"];
    const testDiv = document.getElementById("testDiv");
    const list = `<ul>${testArray.map(test => `<li>${test} ★</li>`).join("")}</ul>`;
    testDiv.innerHTML = list;
    

※ 백틱(`)은 엔터를 입력하면 엔터도 적용을 시켜준다. => <br/> 태그를 사용하지 않아도 된다.

Style을 적용시킨 노드 만들기

• css를 적용시킨 태그를 반환하는 방법

    const settingStyle = newElement =>{
    const newEle = document.createElement(newElement);//신규 태그 생성

    return args = (text ="test text", styleArray) => {
        const settingStyleOptions = styleArray;  //css로 적용할 값들을 불러와서 저장
            newEle.style = settingStyleOptions;   //태그에 css 적용
            newEle.innerHTML = text;
            return newEle;  //태그 반환
        };
    };

    const title = settingStyle("h1")("hmm",`color : white;background-color : blue;font-weight : bold;`);

    //해설
    //1. settingStyle에 "h1"이라는 인자를 넣어서 실행한다.
    //2. 실행될 함수에 한번더 인자를 주게되면 return에서 실행되는 함수에 인자를 준다.

    ////스타일을 적용시킨 h1 태그를 추가
    document.getElementById("testDiv").append(title);
    

• 위의 다중 함수 실행에 대한 테스트

    const add1 = (a = 0, b = 0) => {
        console.log(`add 1 : ${a} + ${b} = ${a+b}`);
        return add2 = (c = 0, d = 0) =>{
            console.log(`add 2 : ${c} + ${d} = ${c+d}`);
            return add3 = (e, f = 0) =>{
                console.log(`add 3 : ${e} + ${f} = ${e+f}`);
            }
        }
    };

    add1(1,1)(2,2)(3,3);
    //출력 목록
    //add 1 : 1 + 1 = 2
    //add 2 : 2 + 2 = 4
    //add 3 : 3 + 3 = 6
    

백틱에 의한 함수 호출 방법

• 기본편

    const add1 = (a = 0, b = 0) => {
        console.log(`add 1 : ${a} + ${b} = ${a+b}`);
        return add2 = (c = 0, d = 0) =>{
            console.log(`add 2 : ${c} + ${d} = ${c+d}`);
            return add3 = (e, f = 0) =>{
                console.log(`add 3 : ${e} + ${f} = ${e+f}`);
            }
        }
    };

    //add1`1`,(2,2)(3,3);로 실행해도 된다.  
    //대신 이 경우에는 1이 숫자가 아닌 문자열이니 이 부분은 조심해야 한다.
    add1`1`,(2,2)(3,3);

    //출력 목록
    //add 1 : 1 + 0 = 10
    //add 2 : 2 + 2 = 4
    //add 3 : 3 + 3 = 6
    

• 응용편

    const test = {
        first : "first",
        second : "second"
    };

    function amazing(strings, var1, var2){
        //인자를 꼬아서 strings를 맨뒤로 보내보면 인자를 어떻게 받는지 알수있다.
        console.log(strings);
        console.log(var1);
        console.log(var2);
        return `${strings[0]}${var1}${strings[1]}${var2}${strings[2]}`;
    }

    //출력 : 시작-first-중간-second-끝
    console.log(amazing`시작-${test.first}-중간-${test.second}-끝`);

    //해설
    /*
    백틱을 사용해서 실행하게 되는 함수는 첫번째 인자에
    백틱에서 사용되었던 ${}를 제외한 문자열들이 배열로 저장되게 된다.
    첫번째 인자 이후의 인자들은 ${}로 사용한 인자들이 차례대로 저장된다.
    */
    

문자열 메소드

• include(“찾을 문자열”)
  • 해당 문자열이 존재하는가 검색
• “문자열”.repeat(n)
  • n번만큼 문자열을 반복
• “문자열”.startsWith(“찾을 문자열”)
  • 해당 문자열로 시작되는지 확인
• “문자열”.endsWith(“찾을 문자열”)
  • 해당 문자열로 종료되는지 확인