๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-end/JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ์ž์—ด String

by ciocio 2021. 7. 24.

๐Ÿ“Œ  String ์ƒ์„ฑ์ž ํ•จ์ˆ˜

 

const strObj = new String();
console.log(strObj);  

// String{length: 0, [[PrimitiveValue]]: ""}
                  // [[PrimitiveValue]]๋Š” [[StringData]] ๋‚ด๋ถ€ ์Šฌ๋กฏ์ด๋‹ค

 

โ— String ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜์ง€ ์•Š๊ณ  new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•˜๋ฉด,

      [ [ StringData ] ] ๋‚ด๋ถ€ ์Šฌ๋กฏ์— ๋นˆ ๋ฌธ์ž์—ด์„ ํ• ๋‹นํ•œ String ๋ž˜ํผ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

      String ๋ž˜ํผ ๊ฐ์ฒด  ===  ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด

 

const strObj = new String('Lee');
console.log(strObj);   

// String{0:"L", 1:"e", 2:"e", length: 3, [[PrimitiveValue]]: "Lee"}

 

โ— ๋ฐฐ์—ด๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ ๋ฌธ์ž์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค

โ— ๋‹จ, ๋ฌธ์ž์—ด์€ ์›์‹œ ๊ฐ’์ด๋ฏ€๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค

 

console.log(strObj[0]);  // L

 

strObj[0] = 'S'       // ์žฌํ• ๋‹น ๋น„์Šทํ•˜๊ฒŒ ํ•ด์คฌ๋Š”๋ฐ, ์•ˆ๋ณ€ํ•จ
console.log(strObj);  // 'Lee'

 

โ— ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ธ์ˆ˜๋กœ ๋ฌธ์ž์—ด์ด ์•„๋‹Œ ๊ฐ’์„ ์ „๋‹ฌํ•˜๋ฉด, ์ธ์ˆ˜๋ฅผ ๊ฐ•์ œ๋กœ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ ํ›„ String ๋ž˜ํผ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

 

let strObj = new Sting(123);
console.log(strObj);
// String{0: "1", 1:"2", 2:"3",length: 3, [[PrimitiveValue]]: "123"}


strObj = new String(null);
console.log(strObj);
// String{0: "n", 1:"u", 2:"l", 3:"l", length: 4, [[PrimitiveValue]]: "null"}

 

โ— new ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  String ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด, String ์ธ์Šคํ„ด์Šค๊ฐ€ ์•„๋‹Œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

 

// ์ˆซ์ž -> ๋ฌธ์ž์—ด

String(1);         // "1"
String(NaN);       // "NaN"
String(Infinity);  // "Infinity"


// ๋ถˆ๋ฆฌ์–ธ -> ๋ฌธ์ž์—ด  

String(true);      // "true"
String(false);     // "false"

 

 

๐Ÿ“Œ  length ํ”„๋กœํผํ‹ฐ

 

'Hello'.length;     // 5
'์•ˆ๋…•ํ•˜์„ธ์š”'.length;  // 6

 

 

๐Ÿ“Œ  String ๋ฉ”์„œ๋“œ

 

 

๋ฐฐ์—ด์—๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œmutator method ์™€ 

์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ , ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œaccessor method๊ฐ€ ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ๋ฌธ์ž์—ด์€ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œimmutable ์›์‹œ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์—, String ๊ฐ์ฒด๋Š” ์–ธ์ œ๋‚˜ ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

String ๋ž˜ํผ ๊ฐ์ฒด๋„ ์ฝ๊ธฐ ์ „์šฉread only ๊ฐ์ฒด๋กœ ์ œ๊ณต๋œ๋‹ค.

 

 

โ—พ indexOf

 

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด์„ ๊ฒ€์ƒ‰ํ•˜์—ฌ, ์ฒซ ๋ฒˆ์งธ ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰์— ์‹คํŒจํ•˜๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•˜๋Š” ์œ„์น˜๋„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

const str = 'Hello world';

str.indexOf('l');     // 2
str.indexOf('or');    // 7
str.indexOf('x');     // -1

str.indexOf('l', 3);  // 3

 

 

โ—พ search

 

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ •๊ทœ ํ‘œํ˜„์‹๊ณผ ๋งค์น˜ํ•˜๋Š” ๋ฌธ์ž์—ด์„ ๊ฒ€์ƒ‰ํ•˜์—ฌ, ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰์— ์‹คํŒจํ•˜๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = 'Hello world';

str.search(/o/);   // 4
str.search(/x/);   // -1

 

 

โ—พ includes

 

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š” ์ง€ ํ™•์ธํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ true/false๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•˜๋Š” ์œ„์น˜๋„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

const str = 'Hello world';

str.includes('Hello');  // true
str.includes('');       // true
str.includes('x');      // false
str.includes();         // false

str.includes('l', 3);   // true
str.includes('H', 3);   // false

 

 

โ—พ startsWith

 

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ง€ ํ™•์ธํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ true/false๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•˜๋Š” ์œ„์น˜๋„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

const str = 'Hello world'

str.startsWith('He');   // true
str.startsWith('x');    // false

str.startsWith(' ', 5); // true

 

 

โ—พ endsWith

 

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด๋กœ ๋๋‚˜๋Š” ์ง€ ํ™•์ธํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ true/false๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰์˜ ๋ฒ”์œ„๋ฅผ ๋ฌธ์ž์—ด์˜ ๊ธธ์ด๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

const str = 'Hello world'

str.endssWith('Id');   // true
str.endsWith('x');    // false

str.endsWith('lo', 5); // true
// ๋ฌธ์ž์—ด str์˜ ์ฒ˜์Œ๋ถ€ํ„ฐ 5์ž๋ฆฌ๊นŒ์ง€('Hello')๊ฐ€ 'lo'๋กœ ๋๋‚˜๋Š”์ง€ ํ™•์ธ

 

 

โ—พ charAt

 

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ธ๋ฑ์Šค์— ์œ„์น˜ํ•œ ๋ฌธ์ž๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ธ๋ฑ์Šค๊ฐ€ ๋ฌธ์ž์—ด์˜ ๋ฒ”์œ„๋ฅผ ๋ฒ—์–ด๋‚œ ๊ฒฝ์šฐ, ๋นˆ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = 'Hello'

for (let i=0; i<str.length; i++){
   console.log(str.charAt(i));     // H e l l o   
}

str.charAt(5);                     // ''

 

 

โ—พ substring

 

// (1, 4) -> 1 <= x < 4 ์˜ ์ธ๋ฑ์Šค์— ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ธ์ˆ˜1 > ์ธ์ˆ˜2      -> ๋‘ ์ธ์ˆ˜๋Š” ๊ตํ™˜๋œ๋‹ค.
// ์ธ์ˆ˜ < 0 || NaN   -> ์ธ์ˆ˜ === 0์œผ๋กœ ์ทจ๊ธ‰๋œ๋‹ค.
// ์ธ์ˆ˜ > str.length -> ์ธ์ˆ˜ === str.length๋กœ ์ทจ๊ธ‰๋œ๋‹ค.

const str = 'Hello world'

str.substring(1, 4);       // 'ell'
str.substring(1);          // 'ello world'

str.substring(4, 1);       // 'ell'
str.substring(-2);         // 'Hello world'
str.substring(1, 100);     // 'ello world'
str.substring(20);         // ''

 

 

โ—พ slice

 

// substring ๋ฉ”์„œ๋“œ์™€ ๋™์ผํ•˜๊ฒŒ ์ž‘๋™ํ•œ๋‹ค.
// ๋‹จ, slice ๋ฉ”์„œ๋“œ๋Š” ์Œ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค !
// ์Œ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋ฉด, ๋Œ€์ƒ ๋ฌธ์ž์—ด์˜ ๊ฐ€์žฅ ๋’ค์—์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋ฌธ์ž์—ด์„ ์ž˜๋ผ๋‚ด์–ด ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = 'Hello world';

str.substring(0, 5);   // 'Hello'
str.slice(0, 5);       // 'Hello'

str.substring(2);      // 'llo world'
str.slice(2);          // 'llo world'

str.substring(-5);     // 'Hello world'
str.slice(-5);         // 'world'

 

 

โ—พ toUpperCase

 

// ๋Œ€์ƒ ๋ฌธ์ž์—ด์„ ๋ชจ๋‘ ๋Œ€๋ฌธ์ž๋กœ ๋ณ€๊ฒฝํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = 'Hello world';

str.toUpperCase();   // 'HELLO WORLD'

 

 

โ—พ toLowerCase

 

// ๋Œ€์ƒ ๋ฌธ์ž์—ด์„ ๋ชจ๋‘ ์†Œ๋ฌธ์ž๋กœ ๋ณ€๊ฒฝํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = 'Hello World'

str.toLowerCase();   // 'hello world'

 

 

โ—พ trim

 

// ๋Œ€์ƒ ๋ฌธ์ž์—ด ์•ž ๋’ค์— ๊ณต๋ฐฑ ๋ฌธ์ž๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ, ์ด๋ฅผ ์ œ๊ฑฐํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = '     foo     '

str.trim();                  // 'foo'
str.trimStart();             // 'foo     ' 
str.trimEnd();               // '     foo'


// ์ •๊ทœ ํ‘œํ˜„์‹์„ ์ด์šฉํ•ด์„œ ๊ณต๋ฐฑ ์ œ๊ฑฐํ•˜๊ธฐ

str.replace(/\s/g, '');      // 'foo'
str.replace(/^\s+/g, '');    // 'foo     ' 
str.replace(/\s/+$/g, '');   // '     foo'

 

 

โ—พ repeat

 

// ๋Œ€์ƒ ๋ฌธ์ž์—ด์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ •์ˆ˜๋งŒํผ ๋ฐ˜๋ณตํ•ด ์—ฐ๊ฒฐํ•œ, ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ž…๋ ฅ๋ฐ›์€ ์ •์ˆ˜๊ฐ€ ์—†๊ฑฐ๋‚˜ 0์ด๋ฉด ๋นˆ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ž…๋ ฅ๋ฐ›์€ ์ •์ˆ˜๊ฐ€ ์Œ์ˆ˜๋ฉด RangeError ๋ฐœ์ƒ์‹œํ‚จ๋‹ค.

const str = 'abc';

str.repeat();      // ''
str.repeat(0);     // ''
str.repeat(2);     // 'abcabc'
str.repeat(2.5);   // 'abcabc'
str.repeat(-1);    // RangeError: Invalid count value

 

 

โ—พ replace

 

// ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜(๋ฌธ์ž์—ด/์ •๊ทœํ‘œํ˜„์‹)๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ, ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๋ฌธ์ž์—ด๋กœ ์น˜ํ™˜ํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๊ฒ€์ƒ‰๋œ ๋ฌธ์ž์—ด์ด ์—ฌ๋Ÿฟ ์กด์žฌํ•  ๊ฒฝ์šฐ, ์ฒซ ๋ฒˆ์งธ๋กœ ๊ฒ€์ƒ‰๋œ ๋ฌธ์ž์—ด๋งŒ ์น˜ํ™˜ํ•œ๋‹ค.

const str = 'Hello world';

str.replace('world', 'Lee');   // 'Hello Lee'
str.replace(/hello/gi, 'Lee'); // 'Lee world'

 

// ์นด๋ฉœ ์ผ€์ด์Šค -> ์Šค๋„ค์ดํฌ ์ผ€์ด์Šค ๋ณ€ํ™˜

function camelToSnake(camelCase){
   return camelCase.replace(/.[A-Z]/g, match => {   
      console.log(match);      
      return match[0] + '_' + match[1].toLowerCase();      
   });   
}

const camelCase = 'helloWorld'

camelToSnake(camelCase);  // 'hello_world'


// ์Šค๋„ค์ดํฌ ์ผ€์ด์Šค -> ์นด๋ฉœ ์ผ€์ด์Šค ๋ณ€ํ™˜

function snakeToCamel(snakeCase){
   return snakeCase.replace(/_[a-z]/g, match => {   
      console.log(match);      
      return match[1].toUpperCase();      
   });   
}

const snakeCase = 'hello_world';

snakeToCamel(snakeCase);  // 'helloWorld'

 

 

โ—พ split 

 

// ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜(๋ฌธ์ž์—ด/์ •๊ทœ ํ‘œํ˜„์‹)๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ, ๋ฌธ์ž์—ด์„ ๊ตฌ๋ถ„ํ•œ ํ›„
// ๋ถ„๋ฆฌ๋œ ๋ฌธ์ž์—ด๋กœ ์ด๋ฃจ์–ด์ง„ "๋ฐฐ์—ด"์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ธ์ˆ˜๋กœ ๋นˆ ๋ฌธ์ž์—ด์„ ์ „๋‹ฌํ•˜๋ฉด, ๊ฐ ๋ฌธ์ž๋ฅผ ๋ชจ๋‘ ๋ถ„๋ฆฌํ•œ๋‹ค.
// ์ธ์ˆ˜๋ฅผ ์ƒ๋žตํ•˜๋ฉด, ๋Œ€์ƒ ๋ฌธ์ž์—ด ์ „์ฒด๋ฅผ ๋‹จ์ผ ์š”์†Œ๋กœ ํ•˜๋Š” ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const str = 'How are you doing?';

str.split(' ');  // ["How", "are", "you", "doing?"]
str.split(/\s/); // ["How", "are", "you", "doing?"]
str.split('');   // ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"]
str.split();     // ["How are you doing?"]


// ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๋ฐฐ์—ด์˜ ๊ธธ์ด๋ฅผ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

str.split(' ', 3);   // ["How", "are", "you"]


// split ๋ฉ”์„œ๋“œ๋Š” "๋ฐฐ์—ด"์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

function reverseString(str){
   return str.split('').reverse().join('');   
}

reverseString('Hello world');   // '!dlrow olleH'

 

 

 

์ถœ์ฒ˜

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive - ์ด์›…๋ชจ

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€