> 웹 프론트엔드 > JS 튜토리얼 > Javascript에서 변수를 문자열로 변환하는 세 가지 방법

Javascript에서 변수를 문자열로 변환하는 세 가지 방법

黄舟
풀어 주다: 2017-09-22 09:53:49
원래의
2594명이 탐색했습니다.

이 글에서는 Javascript에서 변수를 문자열로 변환하는 세 가지 방법을 주로 소개합니다. value.toString(), "" + value 및 String(value) 이 글에서는 샘플 코드를 사용합니다. 필요한 사람은 편집자를 따라가서 함께 배울 수 있습니다.

머리말

모든 사람은 JavaScript를 사용하여 변수를 문자열로 변환하는 3가지 방법이 있다는 것을 알아야 합니다. 이 기사에서는 이러한 방법을 자세히 소개하고 장점과 단점을 비교할 것입니다. 아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

3가지 방법

변수를 문자열로 변환하는 3가지 방법은 다음과 같습니다.

  • value.toString()value.toString()

  • "" + value

  • String(value)

当value为null或者undefined时,第1种方法就不行了。而方法2和方法3基本上是一样的。

""+value: 将value与空字符串相加,即可将其转换为字符串。这种方法其实是一种稍微晦涩的技巧,可能会让别人难于理解开发者的意图。不过,这一点见仁见智,有些人偏爱这种方法。

String(value): 这种方法非常清晰:使用String()函数将value转换为字符串。不过,String()有两种不同用法,容易混淆,尤其对于Java开发者来说。当String()和运算符new一起作为构造函数使用时,它返回一个新创建的String对象;当不用new运算符调用String()时,它只把value转换成原始的字符串。这两者是非常不同的:


> String("Fundebug") === new String("Fundebug")
false
> typeof String("Fundebug")
'string'
> String("Fundebug") instanceof String
false
> typeof new String("Fundebug")
'object'
> new String("Fundebug") instanceof String
true
로그인 후 복사

事实上,将String()作为构造函数使用并不常见,因此仅使用它来转换字符串就好了。

“”+value与String(value)的细微差别

""+valueString(value)都可以将value转换为字符串,它们是如何做到的呢?事实上,它们虽然结果相同,但是方法稍有区别。

将primitive基本类型转换为字符串

两种方法都使用内部函数ToString()将primitive基本类型转换为字符串。ToString()函数在ECMAScript 5.1 (§9.8)中定义了,但是并不能直接使用,因此称作内部函数。下面的表格显示了ToString()

"" + value ""+값: 빈 문자열에 값을 추가하여 문자열로 변환합니다. 이 방법은 사실 다른 사람이 개발자의 의도를 이해하기 어렵게 만들 수 있는 약간 모호한 기술입니다. 그러나 이는 의견의 문제이며 일부 사람들은 이 방법을 선호합니다. String(value): 이 방법은 매우 명확합니다. String() 함수를 사용하여 값을 문자열로 변환합니다. 그러나 String()에는 두 가지 다른 용도가 있으므로 특히 Java 개발자의 경우 혼동하기 쉽습니다. String()이 new 연산자와 함께 생성자로 사용되는 경우 new 연산자 없이 String()이 호출되면 새로 생성된 String 객체를 반환합니다. 변환 값만 반환합니다. 원래 문자열로. 둘은 매우 다릅니다.


사실 String()을 생성자로 사용하는 경우가 흔하지 않으니 그냥 사용하세요. 문자열을 변환합니다. ""+값과 문자열(값)""+값문자열(값)의 미묘한 차이점은 둘 다 값을 문자 문자열로 변환할 수 있습니다. , 그들은 어떻게 합니까? 실제로 결과는 동일하지만 방법은 약간 다릅니다. 기본 기본 유형을 문자열로 변환 두 메서드 모두 내부 함수 ToString()을 사용하여 기본 기본 유형을 문자열로 변환합니다. ToString() 함수는 ECMAScript 5.1(§9.8)에 정의되어 있지만 직접 사용할 수 없으므로 내부 함수라고 합니다. 아래 표는 ToString() 함수가 원시 원시 유형을 문자열로 변환하는 방법을 보여줍니다. parameters
String(value)value가 null이거나 정의되지 않은 경우 첫 번째 방법은 작동하지 않습니다. 그리고 방법 2와 방법 3은 기본적으로 동일합니다.
var obj = {
 valueOf: function()
 {
  console.log("valueOf");
  return {};
 },
 toString: function()
 {
  console.log("toString");
  return {};
 }
};
로그인 후 복사
로그인 후 복사
result
undefine🎜🎜"undefine"🎜🎜🎜 🎜null 🎜🎜"null"🎜🎜🎜🎜Boolean🎜🎜"true" 또는 "false"🎜🎜🎜 🎜Number🎜🎜숫자를 문자열로 변환합니다(예: "1.765"🎜🎜🎜🎜String🎜🎜변환할 필요 없음) 🎜 🎜 🎜🎜

将Object转换为字符串

转换为字符串之前,两种方法都会先将Object转换为primitive。不同的是,""+value使用内部函数ToPrimitive(Number) (除了date类型),而String(value)使用内部函数ToPrimitive(String)

  • ToPrimitive(Number) : 先调用obj.valueOf ,若结果为primitive则返回;否则再调用obj.toString() ,若结果为primitive则返回;否则返回TypeError。

  • ToPrimitive(String) : 与ToPrimitive(Number)类似,只是先调用obj.toString() ,后调用obj.valueOf()

可以通过以下示例了解区别,obj如下:


var obj = {
 valueOf: function()
 {
  console.log("valueOf");
  return {};
 },
 toString: function()
 {
  console.log("toString");
  return {};
 }
};
로그인 후 복사
로그인 후 복사

调用结果:


> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value
> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value
로그인 후 복사

它们的结果相同

""+valueString(value)虽然不同,但是我们很少能感觉到。因为,大多数object使用默认的valueOf() ,它返回对象本身:


> var x = {}
> x.valueOf() === x
true
로그인 후 복사

由于valueOf()返回值并非primitive,因此ToPrimitive(Number)会跳过valueOf() ,而返回toString()的返回值。这样,与ToPrimitive(String)的返回值就一样了。

当object是Boolean、Number或者String实例时,valueOf()将返回primitive。这就意味着两者的计算过程是这样的:

  • ToPrimitive(Number) valueOf()返回primitive值,然后使用ToString()转换为字符串。

  • ToPrimitive(String) : toString()通过ToString()函数将primitive值转换为字符串。

可知,虽然计算过程不同,但是它们的结果是一样的。

结论

那么你该选择哪种方法呢?如果你可以确保value值不是null和undefined,那么不妨使用value.toString() 。否则,你只能使用""+valueString(value) ,它们基本上是一样的。

总结

위 내용은 Javascript에서 변수를 문자열로 변환하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿