> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/string/str-to-num.md).

# str-to-num()

## 용도 <a href="#use" id="use"></a>

문자 값을 숫자 값으로 변경해야 할 때 사용합니다.

## 사용법 <a href="#usage" id="usage"></a>

`str-to-num()` 함수에 변경할 숫자형 문자 값을 전달합니다.

> str-to-num($str-numbe&#x72;**:string**, $max-numbe&#x72;**:number**) → **number**

```javascript
@debug str-to-num('20'); // 20 반환
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|   $str-number   |  string  |      ✔︎      |               |
|   $max-number   |  number  |              |     `100`     |

## 로직 <a href="#logic" id="logic"></a>

`str-to-num()` 유틸리티는 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@use 'sass:map';

@function str-to-num($str-number, $max-number: 100) {
  $numbers: ();

  @for $n from 1 through $max-number {
    $numbers: map.set($numbers, $n + '', $n);
  }

  @if map-has-key($numbers, $str-number) {
    @return map.get($numbers, $str-number);
  } @else {
    @error 'str-to-num() 함수는 #{$max-number} 이하의 숫자형 문자 값만 처리 가능합니다.';
  }
}
```

1. 전달 받은 인자 값이 변경 가능한 숫자형 문자 값인지 검사
2. 변경 가능한 값일 경우, 숫자 맵에서 매칭되는 숫자 값 반환
3. 변경 가능한 값이 아닐 경우, 오류 메시지 출력

## 참고 <a href="#reference" id="reference"></a>

유틸리티 함수 로직에 사용된 Sass 빌트인 모듈은 다음과 같습니다.

* [@function](https://sass-lang.com/documentation/at-rules/function)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [@error](https://sass-lang.com/documentation/at-rules/error)
* [@for](https://sass-lang.com/documentation/at-rules/control/for)
* [map.set()](https://sass-lang.com/documentation/modules/map#set)
* [map.get()](https://sass-lang.com/documentation/modules/map#get)
* [map.has-key()](https://sass-lang.com/documentation/modules/map#has-key)