wp_localize_script()로 숫자를 전달할 때

아래 예제 코드와 결과를 보면 명확하다.

wp_localize_script(
	'foo',
	'bar',
	[
		'initial' => [
			'value' => 0,
			'true'  => true,
			'false' => false,
			'null'  => null,
		],
		'value'   => 11,
		'true'    => true,
		'false'   => false,
		'null'    => null,
	]
);

// console.log( 'bar', bar ); in js.

wp_localize_script() 로 전달한 연관 배열의 최상위 키의 값들은 모두 문자열로 변경된다. 때때로 PHP 측에서 자바스크립트 쪽으로 값을 전달할 때 타입이 달라 의도치 않은 버그를 낼 때가 있다.

이것은 wp_localizae_script() 함수의 알짜인 WP_Scripts::localize() 함수 구현에서 이유를 찾을 수 있다.

...
foreach ( (array) $l10n as $key => $value ) {
	if ( ! is_scalar( $value ) ) {
		continue;
	}

	$l10n[ $key ] = html_entity_decode( (string) $value, ENT_QUOTES, 'UTF-8' );
}
...

함수 내부에서 배열 내부의 키/값을 순회하면서 값을 문자열로 캐스팅한다. 단, 스칼라가 아닌 경우 무시하고 넘어간다.

전달된 값을 숫자나 불리언으로 다시 변경하려면 스크립트 초기에 parseInt()나 parseFloat()을 호출하면 되긴 한다. 불리언은 parseInt() 후 ! 연산자를 두 번 사용하면 편리하다.

하지만 일일이 파라미터마다 일일이 이런 짓을 하는 것은 매우 번거롭다. 가급적 문자열로 변경되는 것을 피해야 할 값들은 최상위 키/값에 값을 두지 말고, 위 예제처럼 배열을 중첩하여 중첩된 배열 안쪽에 두도록 하자.

출처: wp_localize_script unexpectedly converts numbers to strings