자바스크립트 : 데이터 제어하기

//01
    const str1 = "자바스크립트";
    const str2 = "제이쿼리";

    document.querySelector(".sample01_N1").innerHTML = "1";
    document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리";
    document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합";
    document.querySelector(".sample01_P1").innerHTML = str1 + str2;


//02
    const num1 = 100;
    const num2 = 200;

    document.querySelector(".sample01_N2").innerHTML = "2";
    document.querySelector(".sample01_Q2").innerHTML = "100, 200";
    document.querySelector(".sample01_M2").innerHTML = "숫자(number) 결합";
    document.querySelector(".sample01_P2").innerHTML = num1 + num2;

//03
    const text1 = "모던";
    const text2 = "자바스크립트";
    const text3 = "핵심";

    //나는 모던(modern) 자바스크립트(javascrript) 핵심을 배우고 싶다. 출력해보기

    document.querySelector(".sample01_N3").innerHTML = "3";
    document.querySelector(".sample01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
    document.querySelector(".sample01_M3").innerHTML = "문자열(string) 결합";
    document.querySelector(".sample01_P3").innerHTML = "나는 " + text1 + "(modern)" + text2 + "(javascript)" + text3 + "을 배우고 싶다.";

    
//04
    document.querySelector(".sample01_N4").innerHTML = "4";
    document.querySelector(".sample01_Q4").innerHTML = "모던, 자바스크립트, 핵심";
    document.querySelector(".sample01_M4").innerHTML = "템플릿 문자열";
    document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascrript) ${text3}을 배우고 싶다.`;

02.문자열 메서드 : 변경 : toUppercase() : 문자열을 대문자로 변경 : 반환(문자열), toLowerCase() : 문자열을 소문자로 변경 : 반환(문자열)

템플릿 문자열은 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴이다. 중괄호를 리터럴이라고 하고 ${} 리터럴 안에 변수를 넣는다.

번호	기본값	메서드	리턴값

const str1 = "javascript";
const currentStr1 = str1.toUpperCase()



document.querySelector(".sample01_N3").innerHTML = "1";
document.querySelector(".sample01_Q3").innerHTML = "javascript";
document.querySelector(".sample01_M3").innerHTML = "toUpperCase()";
document.querySelector(".sample01_P3").innerHTML = "currentStr1";

const str2 = "JAVASCRIPT";
const currentStr2 = str1.toLowerCase()


document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "JAVASCRIPT";
document.querySelector(".sample01_M3").innerHTML = "toLowerCase()";
document.querySelector(".sample01_P3").innerHTML = "currentStr2";

03.문자열 메서드 : 변경 : trim(),trimStart(),trimEnd() :문자열 앞뒤 공백 제거 : 반환 문자열

메서드는 문자열 양 끝의 공백을 제거합니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다.

번호	기본값	메서드	리턴값

const str = "    javascript          ";
const currentStr = str.trim();


document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = "javascript";
document.querySelector(".sample03_M1").innerHTML = "trim()";
document.querySelector(".sample03_P1").innerHTML = "currentStr";

const str2 = "    javascript          ";
const currentStr2 = str2.trimStart();

document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = str2;
document.querySelector(".sample03_M2").innerHTML = "trimStart()";
document.querySelector(".sample03_P2").innerHTML = currentStr2;


const str3 = "    javascript          ";
const currentStr3 = str3.trimEnd();

document.querySelector(".sample03_N3").innerHTML = "3";
document.querySelector(".sample03_Q3").innerHTML = str3;
document.querySelector(".sample03_M3").innerHTML = "trimEnd()";
document.querySelector(".sample03_P3").innerHTML = currentStr3;

04.문자열 메서드 : 변경 : slice()//substring()//substr() :문자열에서 원하는 값을 추출 : 반환 문자열

문자열에서 원하는 값을 추출하여 반환하는 메서드입니다.

"문자열".slice(시작위치),
"문자열".slice(시작위치, 끝나는위치)
시작위치 < 끝나는위치 시작 위치의 값은 끝나는 위치 값보다 작아야 합니다.
//substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러방지)
"문자열".substr(시작위치)
"문자열".substr(시작위치, 길이)

const str1 = "javascript reference";
const currentStr1 = str1.slice(0);  //javascript reference
const currentStr2 = str1.slice(1);  //avascript reference
const currentStr3 = str1.slice(2);  //vascript reference
const currentStr4 = str1.slice(0, 1); //j
const currentStr5 = str1.slice(0, 2); //ja
const currentStr6 = str1.slice(0, 3); //jav
const currentStr7 = str1.slice(1, 2); //a
const currentStr8 = str1.slice(1, 3); //av
const currentStr9 = str1.slice(1, 4); //avs
const currentStr10 = str1.slice(-1); //e
const currentStr11 = str1.slice(-2); //ce
const currentStr12 = str1.slice(-3); //nce
const currentStr13 = str1.slice(-3, -1); //nc
const currentStr14 = str1.slice(-3, -2); //n
const currentStr15 = str1.slice(-3, -3); //

const currentStr16 = str1.slice(1, 4); //ava
const currentStr17 = str1.slice(4, 1); //''
const currentStr18 = str1.substring(4, 1); //ava
const currentStr19 = str1.substring(1, 4); //ava 값을 알아서 받아서 순서를 잘 출력한다.

const currentStr20 = str1.substr(0); //.
const currentStr21 = str1.substr(1); //avascript reference
const currentStr22 = str1.substr(2); //vascript reference
const currentStr23 = str1.substr(0, 1); //j
const currentStr24 = str1.substr(0, 2); //ja
const currentStr25 = str1.substr(0, 3); //jav
const currentStr26 = str1.substr(1, 2); //av
const currentStr27 = str1.substr(1, 3); //ava
const currentStr28 = str1.substr(1, 4); //avas
const currentStr29 = str1.substr(-1); //e
const currentStr30 = str1.substr(-2); //ce
const currentStr31 = str1.substr(-3); //nce
const currentStr32 = str1.substr(-1, 1); //e
const currentStr33 = str1.substr(-2, 2); //ce
const currentStr34 = str1.substr(-3, 3); //nce

05.split() 문자열에서 원하는 값을 추출 : 반환 (배열)

"문자열".spilt(구분자);
"문자열".spilt(정규식 표현);
"문자열".spilt(구분자, 갯수);

const str1 = "javascript reference";

const currentStr1 = str1.split(''); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e']
const currentStr2 = str1.split(' '); //['javascript', 'reference']
const currentStr3 = str1.split('', 1); //['j']
const currentStr4 = str1.split('', 2); //['j', 'a']
const currentStr5 = str1.split(' ', 1); //['javascript']
const currentStr6 = str1.split(' ', 2); //['javascript', 'reference']
const currentStr7 = str1.split('j'); // ['', 'avascript reference']
const currentStr8 = str1.split('a'); // ['j', 'v', 'script reference']
const currentStr9 = str1.split('e'); // ['javascript r', 'f', 'r', 'nc', '']
const currentStr10 = str1.split('').join('/'); //  j/a/v/a/s/c/r/i/p/t/ /r/e/f/e/r/e/n/c/e 두개를 합쳐서 사용 가능

const str2 = "java/script/refer/ence"

const currentStr11 = str2.split('/');  //['java', 'script', 'refer', 'ence']


const str3 = "java&script&refer!ence"

const currentStr12 = str3.split('!');     // ['java&script&refer', 'ence']
const currentStr13 = str3.split('&');     // ['java', 'script', 'refer!ence']
const currentStr14 = str3.split(/&|\!/);  // ['java', 'script', 'refer', 'ence'] 정규식 표현


const str4 = "java&script&refer!ence"

const currentStr15 = str4.split('').join();
const currentStr16 = str4.split('').join('*');
const currentStr17 = str4.split('').reverce().join();
const currentStr18 = str4.split('').reverce().join('/');

06.replace(), replaceAll()

원본이름은 string.prototype.replace()입니다. 앞부분은 생략하고 써도 가능합니다.

"문자열".replace(찾을 문자열, 변경할 문자열)
"문자열".replace(정규식)
"문자열".replace(정규식, 변경할 문자열)

 const str1 = "javascript reference";
const cirrentStr1 = str1.replace("javascript", "자바스크립트");  //자바스크립트 reference
const cirrentStr2 = str1.replace("j", "J");  //  Javascript reference
const cirrentStr3 = str1.replace("e", "E");  //  javascript rEference
const cirrentStr4 = str1.replaceAll("e", "E");  //  javascript rEfErEncE
const cirrentStr5 = str1.replace(/e/g, "E");  //  javascript rEfErEncE g(global)여러개 있어도 모두 선택
const cirrentStr6 = str1.replace(/e/gi, "E");  //  javascript rEfErEncE i 소문자 대문자 구분하지 않음

const str2 = "https://www.naver.com/img01.jpg";

const cirrentStr7 = str2.replace("1", "2");  //https://www.naver.com/img02.jpg
const cirrentStr8 = str2.replace("img01.jpg", "img02.jpg");  //https://www.naver.com/img02.jpg



const str3 = "010-0000-1000";

const cirrentStr9 = str3.replace("-", "");  //0100000-1000
const cirrentStr10 = str3.replaceAll("-", "");   //01000001000
const cirrentStr11 = str3.replaceAll(/-/g, "");   //01000001000
const cirrentStr12 = str3.replaceAll(/-/g, " ");   //010 0000 1000
const cirrentStr13 = str3.replaceAll(/[1-9]/g, "*");   //0*0-0000-*000

07.concat()

concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다.
"문자열".concat(문자열, 문자열 ...)

메서드는 둘 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고 대신 새 배열을 반환합니다.

const str1 = "javascript"
const currenStr1 = str1.concat("reference")   //javascriptreference
const currenStr2 = str1.concat(" ", "reference")    //javascript reference
const currenStr3 = str1.concat(",", "reference")    //javascript,reference
const currenStr4 = str1.concat(",", "reference", ",", "book")    //javascript,reference,book
const currenStr5 = str1.concat(" ", ["reference", "book"])    //javascript reference,book

08.repeat()

repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다.

메서드는 호출되고 함께 연결된 문자열의 지정된 수의 복사본을 포함하는 새 문자열을 구성하고 반환합니다

const str1 = "javascript";

const cirrentStr1 = str.repeat(0)   // ''
const cirrentStr2 = str.repeat(1)   // javascript
const cirrentStr3 = str.repeat(2)   //  javascriptjavascript

09.padStart(), padEnd()

padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다.

"문자열".padStart(길이)
"문자열".padStart(길이, 문자열)

const str1 = "456";
const currenStr1 = str1.padStart(1, "0");        //456  
const currenStr2 = str1.padStart(2, "0");        //456
const currenStr3 = str1.padStart(3, "0");        //456
const currenStr4 = str1.padStart(4, "0");        //0456
const currenStr5 = str1.padStart(5, "0");        //00456
const currenStr6 = str1.padStart(6, "0");        //000456
const currenStr7 = str1.padStart(6, "1");        //111456
const currenStr8 = str1.padStart(6, "12");       //121456
const currenStr9 = str1.padStart(6, "123");      //123456
const currenStr10 = str1.padStart(6, "1234");    //123456
const currenStr11 = str1.padStart(6);            //   456

const currenStr12 = str1.padEnd(1, "0");            //   456
const currenStr13 = str1.padEnd(2, "0");            //   456
const currenStr14 = str1.padEnd(3, "0");            //   456
const currenStr15 = str1.padEnd(4, "0");            //   4560
const currenStr16 = str1.padEnd(5, "0");            //   45600
const currenStr17 = str1.padEnd(6, "0");            //   456000
const currenStr18 = str1.padEnd(6, "1");            //   456111
const currenStr19 = str1.padEnd(6, "12");           //   456121
const currenStr20 = str1.padEnd(6, "123");          //   456123
const currentStr21 = str1.padEnd(6, "1234");        //   456123
const currentStr22 = str1.padEnd(6);                //   456___   뒤에 0 안보임

10.indexOf() / lastIndexOf()

문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다.

"문자열".indexOf(검색값);
"문자열".indexOf(검색값, 위치값);
"문자열".lastIndexOf(검색값);
"문자열".lastIndexOf(검색값, 위치값);

const str1 = "javascript reference"
const currentStr1 = str1.indexOf("javascript");     //0
const currentStr2 = str1.indexOf("reference");      //11
const currentStr3 = str1.indexOf("j");              //0
const currentStr4 = str1.indexOf("a");              //1
const currentStr5 = str1.indexOf("v");              //2
const currentStr6 = str1.indexOf("jquery");         //-1
const currentStr7 = str1.indexOf("b");              //-1 데이터값이 없으면 -1
const currentStr8 = str1.indexOf("javascript", 0);  //  0
const currentStr9 = str1.indexOf("javascript", 1);  // -1
const currentStr10 = str1.indexOf("reference", 0);  // 11
const currentStr11 = str1.indexOf("reference", 1);  // 11
const currentStr12 = str1.indexOf("reference", 11); // 11
const currentStr13 = str1.indexOf("reference", 12); // -1      


//lastIndexOf()
const currentStr14 = str1.lastIndexOf("javascript");     // 0
const currentStr15 = str1.lastIndexOf("reference");      // 11
const currentStr16 = str1.lastIndexOf("j");              // 0
const currentStr17 = str1.lastIndexOf("a");              // 3
const currentStr18 = str1.lastIndexOf("v");              // 2
const currentStr19 = str1.lastIndexOf("jquery");         // -1
const currentStr20 = str1.lastIndexOf("b");              // -1
const currentStr21 = str1.lastIndexOf("javascript", 0);  //  0
const currentStr22 = str1.lastIndexOf("javascript", 1);  //  0
const currentStr23 = str1.lastIndexOf("reference", 0);   // -1
const currentStr24 = str1.lastIndexOf("reference", 1);   // -1
const currentStr25 = str1.lastIndexOf("reference", 11);  // 11
const currentStr26 = str1.lastIndexOf("reference", 12);  // 11

"문자열".includes(검색값); "문자열".includes(검색값, 위치값);

11.include()

includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.

"문자열".include(검색값); "문자열".include(검색값, 위치값);

const str1 = "javascript reference"
const currentStr1 = str1.includes("javascript");     //true
const currentStr2 = str1.includes("j");              //true
const currentStr3 = str1.includes("b");              //false
const currentStr4 = str1.includes("reference");      //false
const currentStr5 = str1.includes("reference", 1);   //true
const currentStr6 = str1.includes("reference", 11);  //true
const currentStr7 = str1.includes("reference", 12);  //false

12.search()

search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다.

"문자열".search("검색값") "문자열".search("정규식 표현")

const str1 = "javascript reference" 
const currentStr1 = str1.search("javascript");     // 0
const currentStr2 = str1.search("reference");      // 11
const currentStr3 = str1.search("j");              // 0
const currentStr4 = str1.search("a");              // 1
const currentStr5 = str1.search("v");              // 2
const currentStr6 = str1.search("jquery");         //-1
const currentStr7 = str1.search("b");              //-1 데이터값이 없으면 -1
const currentStr8 = str1.search(/[a-z]/g);         // 0

13. match : 반환(배열) 정규식도 가능

indexOf와 비슷하지만 match는 정규식표현도 지원하고 배열로 반환한다.

  const str1 = "javascript reference" 
const currentStr1 = str1.match("javascript");        //[javascript]
const currentStr2 = str1.match("reference");         //[reference]
const currentStr3 = str1.match("r");                 //[r]
const currentStr4 = str1.match(/reference/g);        //['reference']
const currentStr5 = str1.match(/Reference/g);        //null
const currentStr6 = str1.match(/Reference/i);        //[reference]
const currentStr7 = str1.match(/r/g);                //['r', 'r', 'r']
const currentStr8 = str1.match(/e/g);                //['e', 'e', 'e', 'e']

14. charAt() / charCodeAt

charAt()메서드는단위로 구성된 새 문자열을 문자열로 반환합니다. charCodeAt()메서드는 지정한 숫자의 유니코드 값을 반환합니다.

"문자열".charAt(숫자); "문자열".charAtCode(숫자);

const str1 = "javascript reference" 
const currentStr1 = str1.charAt();        //[j]
const currentStr2 = str1.charAt("0");        //[j]
const currentStr3 = str1.charAt("1");        //[a]
const currentStr4 = str1.charAt("2");        //[v]

const currentStr5 = str1.charCodeAt();       //106   
const currentStr6 = str1.charCodeAt("0");    //106
const currentStr7 = str1.charCodeAt("1");    //97
const currentStr8 = str1.charCodeAt("2");    //118

15. 문자열 메서드 : 검색 : startsWith() / endsWith()

startsWith()메서드는 시작하는 문자열에서 문자열를 검색하여 불린으로 반환합니다. endsWith() : 문자열 포함 여부 검색 : 반환(불린)

"문자열".startsWidth("검색 문자열")
"문자열".startsWidth("검색 문자열", 위치값)
"문자열".endsWidth("검색 문자열")
"문자열".endsWidth("검색 문자열", 위치값)

const str1 = "javascript reference";
const currentStr1 = str1.startsWith('javascript') //true
const currentStr2 = str1.startsWith('j') //true
const currentStr3 = str1.startsWith('java') //true
const currentStr4 = str1.startsWith('reference') //false
const currentStr5 = str1.startsWith() //false
const currentStr6 = str1.startsWith('') //true
const currentStr7 = str1.startsWith('reference', 7) //false
const currentStr8 = str1.startsWith('reference', 11) //true

const currentStr9 = str1.endsWith('reference') //true
const currentStr10 = str1.endsWith('e') //true
const currentStr11 = str1.endsWith('refer') //true
const currentStr12 = str1.endsWith('javascript') //false
const currentStr13 = str1.endsWith() //false
const currentStr14 = str1.endsWith('') //true
const currentStr15 = str1.endsWith('reference', 7) //false
const currentStr16 = str1.endsWith('reference', 20) //true