01. 문자열 : 문자열 결합 / 템플릿 문자열

문자열 결합은 + 이용하여 합칠수 있지만 템플릿 문자열은 `문자 ${변수이름}` 을 통하여 만들수있습니다.

번호 기본값 메서드 리턴값
//01
const str1 = "자바스크립트";
const str2 = "제이커리"
document.querySelector(".smple01_N1").innerHTML = "1";
document.querySelector(".smple01_Q1").innerHTML = "자바스크립트, 제이쿼리";
document.querySelector(".smple01_M1").innerHTML = "문자열 결합(string)";
document.querySelector(".smple01_P1").innerHTML = str1 + str2;
const num1 = 100;
const num2 = 100;
//02
document.querySelector(".smple01_N2").innerHTML = "2";
document.querySelector(".smple01_Q2").innerHTML = "100, 200";
document.querySelector(".smple01_M2").innerHTML = "숫자(number) 결합";
document.querySelector(".smple01_P2").innerHTML = num1 + num2;
//03
const text1 = "모던";
const text2 = "자바스크립트";
const text3 = "핵심";
document.querySelector(".smple01_N3").innerHTML = "3";
document.querySelector(".smple01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".smple01_M3").innerHTML = "문자열 결합(string)";
document.querySelector(".smple01_P3").innerHTML = "나는 " + text1 +"(modern) "+ text2 +"(javascript) "+ text3 + "을 배우고 싶다."
//04
document.querySelector(".smple01_N3").innerHTML = "4";
document.querySelector(".smple01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".smple01_M3").innerHTML = "템플릿 문자열(string) 결합";
document.querySelector(".smple01_P3").innerHTML = `나는  ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`

02. toUpperCase() / toLowerCase()

문자열을 대문자와 소문자로 변경 하는 메서드입니다.

번호 기본값 메서드 리턴값
//01
const str1 = "javascript";
const currentStr1 = str1.toUpperCase();
//02

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

03. trim() / trimStart() / trimEnd()

앞, 뒤 공백을 잘라주는 메서드입니다.

번호 기본값 메서드 리턴값
//01
const str = "     javascript    "
const currenStr = str.trim();

//02
const str2 = "     javascript    "
const currenStr2 = str.trimStart();

//03
const str3 = "     javascript    "
const currenStr3 = str.trimEnd();

04. slice() / substring() / substr()

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

"문자열".slice(시작위치)
"문자열".slice(시작위치, 끝나는위치)
//시작위치의 값은 끝나는 위치 값보다 작아야 합니다.
//substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지)
"문자열".substr(시작위치)
"문자열".substr(시작위치, 길이)
const str = "javascript reference"
const currenStr1 = str.slice(0); //javascript reference
const currenStr2 = str.slice(1); //avascript reference
const currenStr3 = str.slice(2); //vascript reference
const currenStr4 = str.slice(0, 1); //j
const currenStr5 = str.slice(0, 1); //j
const currenStr6 = str.slice(0, 2); //ja
const currenStr7 = str.slice(1, 2); //a
const currenStr8 = str.slice(1, 3); //av
const currenStr9 = str.slice(1, 4); //ava
const currenStr10 = str.slice(-1); //e
const currenStr11 = str.slice(-2); //ce
const currenStr12 = str.slice(-3); //nce
const currenStr13 = str.slice(-3, -1); //nc
const currenStr14 = str.slice(-3, -2); //n
const currenStr15 = str.slice(-3, -3); //''

const currenStr16 = str.slice(1, 4); //ava
const currenStr17 = str.slice(4, 1); //''

const currenStr18 = str.substring(1, 4); //ava
const currenStr19 = str.substring(4, 1); //ava

const currenStr20 = str.substr(0); //javascript reference
const currenStr21 = str.substr(1); //avascript reference
const currenStr22 = str.substr(2); //vascript reference
const currenStr23 = str.substr(0, 1); //j
const currenStr24 = str.substr(0, 2); //ja
const currenStr25 = str.substr(0, 3); //jav
const currenStr26 = str.substr(1, 2); //av
const currenStr27 = str.substr(1, 3); //ava
const currenStr28 = str.substr(1, 4); //avas
const currenStr29 = str.substr(-1); //e
const currenStr30 = str.substr(-2); //ce
const currenStr31 = str.substr(-3); //nce
const currenStr32 = str.substr(-1, 1); //e
const currenStr33 = str.substr(-2, 2); //ce
const currenStr34 = str.substr(-3, 3); //nce

05. split()

문자열에서 원하는 값을 추출 배열로 변환합니다.

//"문자열".split(구분자);
//"문자열".split(정규식 표현)
//"문자열".split(구분자, 갯수)
const str1 = "javascript reference";
const currenStr1 = str1.split(''); // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', '', 'r' ...]
const currenStr2 = str1.split(' '); // ['javasciprt', 'refernce']
const currenStr3 = str1.split('', 1); // ['j']
const currenStr4 = str1.split('', 2); // ['j','a']
const currenStr5 = str1.split(' ', 1); // ['javasciprt']
const currenStr6 = str1.split(' ', 2); // ['javasciprt', 'refernce']
const currenStr7 = str1.split('j'); // ['', 'avasciprt refernce']
const currenStr8 = str1.split('a'); // ['j','v' 'sciprt refernce']
const currenStr9 = str1.split('e'); // ['javascript r', 'f', 'r', 'nc', '']

const str2 = "java/script/refer/ence";
const currenStr10 = str2.split('/') // ['java', 'scrpt', 'refer', 'ence']
    
const str3 = "java&script&refer!ence";;
const currenStr11 = str3.split('!') // ['java&script&refer', 'ence']
const currenStr12 = str3.split('&') // ['java','script', 'refer!ence']
const currenStr13 = str3.split(/&|\!/) // ['java', 'script', 'refer', 'ence']

const str4 = "javascript reference";
const currenStr14 = str4.split('').join(); // j,a,v,a,s,c,r,i,p,t, ,r,e,f,e,r,e,n,c,e
const currenStr15 = str4.split('').join('*'); // j*a*v*a*s*c*r*i*p*t* *r*e*f*e*r*e*n*c*e
const currenStr16 = str4.split('').reverse().join(); // e,c,n,e,r,e,f,e,r, ,t,p,i,r,c,s,a,v,a,j
const currenStr17 = str4.split('').reverse().join('/'); // e/c/n/e/r/e/f/e/r/ /t/p/i/r/c/s/a/v/a/j

06. replace() / replaceAll()

replace() 메서드는 문자열을 부분 문자열로 구분 하고 배열로 반환합니다. 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다.
그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.

// "문자열".replace("찾을 문자열", "변경할 문자열") // "문자열".replace("정규식") // "문자열".replace("정규식", "변경할 문자열") // "문자열".replaceAll("정규식", "변경할 문자열") 모든것을 다바꿔줘요!
const str1 = "javascript reference";
const currentStr1 = str1.replace("javascript", "자바스크립트"); // 자바스크립트 refernce
const currentStr2 = str1.replace("j", "J"); // Javascript refernce
const currentStr3 = str1.replace("e", "E"); // javascript rEference     
const currentStr4 = str1.replaceAll("e", "E"); // javascript rEfErEncE
const currentStr5 = str1.replace(/e/g, "E"); // javascript rEference (g : global)
const currentStr6 = str1.replace(/e/gi, "E"); // javascript rEference (i : 대/소문자)

const str2 = "https://www.naver.com/img01.jpg";
const currentStr7 = str2.replace(/img01.jpg/gi, "img02.jpg"); //https://www.naver.com/img02.jpg
const currentStr8 = str2.replace("img01.jpg", "img02.jpg"); //https://www.naver.com/img02.jpg
            
const str3 = "010-2000-1000";
const currentStr9 = str3.replace("-", ""); //0102000-1000
const currentStr10 = str3.replaceAll("-", ""); //01020001000
const currentStr11 = str3.replace(/-/g, ""); //01020001000
const currentStr12 = str3.replace(/-/g, " "); //010 2000 1000
const currentStr13 = str3.replace(/-/g, "*"); //010*2000*1000
const currentStr14 = str3.replace(/[1-9]/g, "*"); //0*0-*000-*000

07. concat()

concat() 메서드는 문자열을 합쳐줍니다.

//"문자열".concat("문자열", "문자열",,,,)
const str1 = "javascript";
const currentStr1 = str1.concat("reference"); //javascriptreference
const currentStr2 = str1.concat(" ", "reference"); //javascript reference
const currentStr3 = str1.concat(", ", "reference"); //javascript, reference
const currentStr4 = str1.concat(", ", "reference", ", ", "book"); //javascript, reference, book
const currentStr5 = str1.concat(" ", ["reference","book"]); //javascript,reference,book

08. repeat()

repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.

//"문자열".repeat(반복횟수)
 const str1 = "javascript";
const currenStr1 = str.repeat(0); //
const currenStr2 = str.repeat(1); //javascript
const currenStr3 = 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 currenStr21 = str1.padEnd(6, "1234"); //456123
const currenStr22 = str1.padEnd(6); //456___

10. indexOf()/lastindexOf()

indexOf()/lastindexOf() 메서드는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다.

// "문자열".lastindexOf(검색값)
// "문자열".lastindexOf(검색값, 위치값)
// "문자열".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
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

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);  // -1

11. includes()

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

"문자열".includes(검색값)
"문자열".includes(검색값, 위치값)
const str1 = "javascript reference";
const currenStr1 = str1.includes("javascript"); //true
const currenStr2 = str1.includes("j"); //true
const currenStr3 = str1.includes("b"); //false
const currenStr4 = str1.includes("reference"); //true
const currenStr5 = str1.includes("reference", 1); //true
const currenStr6 = str1.includes("reference", 11); //true
const currenStr7 = 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
const currentStr8 = str1.search(/[a-z]/g);          // 0

13. match()

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

match : 반환(배열)
"문자열".match(검색값)
"문자열".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/);      // reference
const currentStr5 = str1.match(/Reference/);      // 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(숫자);
"문자열".charCodeAt(숫자);
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.charAt("0"); //106
const currentStr7 = str1.charAt("1"); //97
const currentStr8 = str1.charAt("2"); //118

15. startsWith()

startsWith() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린으로(true, false) 반환합니다.
endssWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)을 반환합니다.

"문자열".startsWith(검색 문자열);
"문자열".startsWith(검색 문자열, 위치값);
"문자열".endssWith(검색 문자열);
"문자열".endssWith(검색 문자열, 위치값);
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"); // true
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'); // false
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