๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JAVASCRIPT

[JAVASCRIPT] ๋ฌธ์ž์—ด ๋ฉ”์„œ๋“œ : padStart( ) / padEnd( )

by _ํ† ๋งคํ†  2022. 8. 18.
728x90

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ : ๋ฌธ์ž์—ด ๋ฉ”์„œ๋“œ : padStart() / padEnd()

์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ๋ฌธ์ž์—ด ๋ฉ”์„œ๋“œ์ธ padStart() / padEnd()์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค! ๐Ÿ˜


#1. padStart( )

padStart() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ๊ธธ์ด์— ๋งž๊ฒŒ ์•ž ์ž๋ฆฌ์— ๋ฌธ์ž์—ด์„ ์ฑ„์šฐ๊ณ , ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

! padStart( ) ์‚ฌ์šฉ ๋ฐฉ๋ฒ• !
"๋ฌธ์ž์—ด".padStart(๊ธธ์ด(์ž๋ฆฌ์ˆ˜));
"๋ฌธ์ž์—ด".padStart(๊ธธ์ด(์ž๋ฆฌ์ˆ˜), "์ถ”๊ฐ€ ํ•  ๋ฌธ์ž์—ด");

const str1 = "456";

const cirrentStr1 = str1.padStart(1, "0");      //456
const cirrentStr2 = str1.padStart(2, "0");      //456
const cirrentStr3 = str1.padStart(3, "0");      //456 : ๊ธฐ์กด ๋ฌธ์ž์—ด์—์„œ ์ž๋ฆฌ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ž์—ด์ด ์ถ”๊ฐ€๋˜์ง€ ์•Š๋Š”๋‹ค.
const cirrentStr4 = str1.padStart(4, "0");      //0456 : ์ž๋ฆฟ์ˆ˜๋ณด๋‹ค ํด ๊ฒฝ์šฐ ์•ž์— 0์ด ๋ถ™๋Š”๋‹ค.
const cirrentStr5 = str1.padStart(5, "0");      //00456 : ์ž๋ฆฟ์ˆ˜๋ณด๋‹ค ํด ๊ฒฝ์šฐ ์•ž์— 0์ด ๋ถ™๋Š”๋‹ค.
const cirrentStr6 = str1.padStart(6, "0");      //000456 : ์ž๋ฆฟ์ˆ˜๋ณด๋‹ค ํด ๊ฒฝ์šฐ ์•ž์— 0์ด ๋ถ™๋Š”๋‹ค.
const cirrentStr7 = str1.padStart(6, "1");      //111456 : ์ž๋ฆฟ์ˆ˜๋ณด๋‹ค ํด ๊ฒฝ์šฐ ์•ž์— 1์ด ๋ถ™๋Š”๋‹ค.
const cirrentStr8 = str1.padStart(6, "12");     //121456 : ์ž๋ฆฟ์ˆ˜๋ณด๋‹ค ํด ๊ฒฝ์šฐ ์•ž์— 121์ด ๋ถ™๋Š”๋‹ค.
const cirrentStr9 = str1.padStart(6, "123");    //123456 : ์ž๋ฆฟ์ˆ˜๋ณด๋‹ค ํด ๊ฒฝ์šฐ ์•ž์— 123์ด ๋ถ™๋Š”๋‹ค.
const cirrentStr10 = str1.padStart(6, "1234");  //123456 : ์ž๋ฆฌ์ˆ˜๋ณด๋‹ค ๋ฌธ์ž์—ด์ด ๊ธธ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ž์—ด์˜ ๋งˆ์ง€๋ง‰ ๊ฐ’์€ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค.
const cirrentStr11 = str1.padStart(6);          //   456 : ๋’ค์— ๋ฌธ์ž์—ด์„ ์ž…๋ ฅํ•˜์ง€ ์•Š์œผ๋ฉด ์•ž์˜ ์ž๋ฆฌ์ˆ˜๋งŒํผ ๊ณต๋ฐฑ ์ฒ˜๋ฆฌ ๋œ๋‹ค. : 456์€ ์ž๋ฆฟ์ˆ˜๊ฐ€ 3์ด๋‹ˆ ๋‚จ์€ 3๋งŒํผ์˜ ๊ณต๋ฐฑ์ด ์ƒ๊น€

! point ! ๋ฌธ์ž์—ด์„ ์ถ”๊ฐ€ํ–ˆ์„ ๋•Œ ๋ฌธ์ž์—ด์˜ ์ž๋ฆฌ์ˆ˜๋ณด๋‹ค ๋ฌธ์ž์—ด์ด ๊ธด ๊ฒฝ์šฐ ์ถ”๊ฐ€ ๋œ ๋ฌธ์ž์—ด์˜ ๋งˆ์ง€๋ง‰ ๊ฐ’์€ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค.
์ด ๋•Œ ๋งŒ์•ฝ ์ž๋ฆฌ์ˆ˜๋Š” ๋Š˜์–ด๋‚ฌ๋Š”๋ฐ ์ถ”๊ฐ€ํ•  ๋ฌธ์ž์—ด์ด ์—†์„ ๊ฒฝ์šฐ ๊ณต๋ฐฑ์ฒ˜๋ฆฌํ•œ๋‹ค.
๊ธฐ์กด ๋ฌธ์ž์—ด์—์„œ ๊ธธ์ด๋ฅผ ์ถ”๊ฐ€ํ–ˆ์„ ๋•Œ ์ž๋ฆฌ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚˜์ง€ ์•Š์•˜์„ ๊ฒฝ์šฐ ๋ฌธ์ž์—ด์€ ์ถ”๊ฐ€๋˜์ง€ ์•Š๋Š”๋‹ค.


#2. padEnd( )

padEnd() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ๊ธธ์ด์— ๋งž๊ฒŒ ๋’ท ์ž๋ฆฌ์— ๋ฌธ์ž์—ด์„ ์ฑ„์šฐ๊ณ , ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

! padEnd( ) ์‚ฌ์šฉ ๋ฐฉ๋ฒ• !
"๋ฌธ์ž์—ด".padEnd(๊ธธ์ด);
"๋ฌธ์ž์—ด".padEnd(๊ธธ์ด, "๋ฌธ์ž์—ด");

const str1 = "456";

const cirrentStr1 = str1.padEnd(1, "0");     // 456
const cirrentStr2 = str1.padEnd(2, "0");     // 456
const cirrentStr3 = str1.padEnd(3, "0");     // 456
const cirrentStr4 = str1.padEnd(4, "0");     // 4560
const cirrentStr5 = str1.padEnd(5, "0");     // 45600
const cirrentStr6 = str1.padEnd(6, "0");     // 456000
const cirrentStr7 = str1.padEnd(6, "1");     // 456111
const cirrentStr8 = str1.padEnd(6, "12");    // 456121
const cirrentStr9 = str1.padEnd(6, "123");   // 456123
const cirrentStr10 = str1.padEnd(6, "1234");  // 456123
const cirrentStr11 = str1.padEnd(6);          // 456___ (๊ณต๋ฐฑ์ด ํ‹ฐ๊ฐ€ ์•ˆ๋‚˜์„œ ์ž„์‹œ๋กœ ํ•˜์ดํ”ˆ์œผ๋กœ ๋Œ€์ฒด!)

! point ! ๋ฌธ์ž์—ด์„ ์ถ”๊ฐ€ํ–ˆ์„ ๋•Œ ๋ฌธ์ž์—ด์˜ ์ž๋ฆฌ์ˆ˜๋ณด๋‹ค ๋ฌธ์ž์—ด์ด ๊ธด ๊ฒฝ์šฐ ์ถ”๊ฐ€ ๋œ ๋ฌธ์ž์—ด์˜ ๋งˆ์ง€๋ง‰ ๊ฐ’์€ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค.
์ด ๋•Œ ๋งŒ์•ฝ ์ž๋ฆฌ์ˆ˜๋Š” ๋Š˜์–ด๋‚ฌ๋Š”๋ฐ ์ถ”๊ฐ€ํ•  ๋ฌธ์ž์—ด์ด ์—†์„ ๊ฒฝ์šฐ ๊ณต๋ฐฑ์ฒ˜๋ฆฌํ•œ๋‹ค.
๊ธฐ์กด ๋ฌธ์ž์—ด์—์„œ ๊ธธ์ด๋ฅผ ์ถ”๊ฐ€ํ–ˆ์„ ๋•Œ ์ž๋ฆฌ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚˜์ง€ ์•Š์•˜์„ ๊ฒฝ์šฐ ๋ฌธ์ž์—ด์€ ์ถ”๊ฐ€๋˜์ง€ ์•Š๋Š”๋‹ค.

728x90

๋Œ“๊ธ€


Lucky Charms Rainbow
js
html
css