看到一篇文章: https://nbsaw.surge.sh/#/post/71
作者想把
var colors = {
gray: {
default: "#DDDDDD",
light: "#EEEEEE",
dark: "#CCCCCC"
})
}
省去 default, 实现这样的效果:
const Components = styled.div`
background: ${ colors.gray }; // background: #DDDDDD
`
const Components2 = styled.div`
background: ${ colors.gray.light }; // background: #EEEEEE
`
const Components3 = styled.div`
background: ${ colors.gray.dark }; // background: #CCCCCC
`
实现的方法是这样:
const colors = {
gray: Object.assign("#DDDDDD", {
light: "#EEEEEE",
dark: "#CCCCCC"
})
}
一开始是感兴趣的,但是发现自己确实实现不了,返回的 colors.gray 是个 object, 查了下 MDN 上 Object.assign 的首个参数只能是 object, 就算不是 object 也会转成 object。
所以问题是:
1
CoverL 2019 年 10 月 29 日 String 为包装类型,String(colors.gray) === ‘#dddddd’; 看下相关知识吧
|
2
codingBug 2019 年 10 月 29 日
学到了
|
3
AlphaTr 2019 年 10 月 29 日
const a = Object.assign("#DDDDDD", {light: "#EEEEEE", dark: "#CCCCCC"}); console.log(`${a}, ${a.light}`); 原生就这么用就行吧
|
4
xxx749 2019 年 10 月 29 日 via Android
学到了
|
5
cheeto 2019 年 10 月 29 日
https://stackoverflow.com/questions/42560540/what-happens-when-i-object-assign-to-a-primitive-type-in-javascript
colors.gray 是个 Object 没错,在使用${}模版字符串占位符时,应该就默认调用了它的 toString()方法吧,使其输出为#DDDDDD |
6
roscoecheung1993 2019 年 10 月 29 日
ecma 定义 Object.assign 的第一步:第一个参数 toObject,
Let to be ToObject(target) string ToObject 操作如下 Return a new String object whose [[StringData]] internal slot is set to the value of argument 所以原生这么写没毛病 |
7
zzlit 2019 年 10 月 29 日
学习一下
|
8
shiny PRO js 正是一门可以活到老学到老的语言,寿与天齐,千秋万载,一统江湖
|
9
howell5 OP @roscoecheung1993 @CoverL @cheeto @AlphaTr
ok, 我 get 到了。返回的是 object 没错。忽略了 toString()的隐形触发 -_-|| 。 只有当实际使用到类似于${}自动触发或者自己手动触发 toString()去使用。感谢各位。 |
10
zbinlin 2019 年 10 月 29 日
你可以这样定义:
var colors = { gray: { toString: () => "#DDDDDD", light: "#EEEEEE", dark: "#CCCCCC", }, }; '#DDDDDD' === `${colors.gray}` '#EEEEEEE' === `${colors.gray.light}` '#CCCCCC' === `${colors.gray.dark}` |
11
chuxiaonan 2019 年 10 月 29 日
toString() 可以做到
Proxy 应该也可以 |
12
chuxiaonan 2019 年 10 月 29 日
试了一下 Proxy 似乎并不可以
|
13
ssshooter 2019 年 10 月 29 日 via Android
有点意思
|
14
autoxbc 2019 年 10 月 30 日 基本包装类型另一个玩法是把包装作为容器,挂载一些私有数据上去
比如对一个基本类型数据做链式加工,原始值挂在包装上,可以在需要时提取出来 |
15
ruandao 2019 年 10 月 30 日 via iPhone
div ' 的是什么无法?
|
17
ericgui 2019 年 10 月 30 日
|