TIL | string 메서드 (substring() vs slice() ...), 형변환 단항연산자 +, css (auto-fill vs auto-fit ...)

23.07.31

1. substring() vs slice()

1-1. substring()

substr() : 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환하는 메서드
mdn 문서

const str = 'Mozilla';

console.log(str.substring(1, 2)); // "oz"
console.log(str.substring(2)); // "zilla"

1-2. slice()

slice() : 문자열의 일부를 추출하면서 새로운 문자열을 반환 메서드
mdn 문서

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31)); // "the lazy dog."
console.log(str.slice(4, 19)); // "quick brown fox"
console.log(str.slice(-4)); // "dog."
console.log(str.slice(-9, -5)); // "lazy"

1-3. substring() vs slice()

즉, 정리해보면 substr()의 첫번째 인자는 첫 인덱스, 두번째 인자는 추출할 문자들의 수
slice()의 첫번째 인자는 첫 인덱스, 두번째 인자는 끝 인덱스를 의미

const str = 'The quick brown fox';
consloe.log(str.substring(5, 5)) // "uick "
consloe.log(str.slcie(5, 10)) // "uick "
consloe.log(str.slcie(4, 10)) // "quick "

---

2. 형변환 단항연산자 +

참고문서

숫자타입이 아닌 피연산자 앞에 단항연산자 +를 붙이면 피연산자를 숫자 타입으로 변환하여 반환

console.log(+"10");  // 10
console.log(+"10.1");// 10.1
console.log(+"-10"); // -10

console.log(+true);  // 1
console.log(+false); // 0
console.log(+0xBABE) // 47806 (Hexadecimal)
console.log(+null)   // 0

const a = -10
console.log(+a); // -10

=> +쓰면 마이너스는 음수, 플러스는 양수

---

3. css (auto-fill vs auto-fit)

auto-fill과 auto-fit은 위에서 설명한 repeat() 함수와 함께 사용
참고문서
참고문서 2

repeat()함수는 설정된 너비가 허용하는 한 최대한 셀을 채우게 됨

auto-fill : 설정된 너비에서 가능한 많은 셀들을 만듦, 겉으로 보기에는 빈 공간이 있더라도 셀의 길이를 늘리지 않음
auto-fit : 빈 공간을 셀들이 나누어 가져서 딱 맞게 길이를 설정, 겉으로 보기에는 셀의 길이를 전체 너비에 맞게 늘림.