
看到一篇文章: 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 ` cons 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 Oct 29, 2019 String 为包装类型,String(colors.gray) === ‘#dddddd’; 看下相关知识吧 |
2 codingBug Oct 29, 2019 学到了 |
3 AlphaTr Oct 29, 2019 const a = Object.assign("#DDDDDD", {light: "#EEEEEE", dark: "#CCCCCC"}); console.log(`${a}, ${a.light}`); 原生就这么用就行吧 |
4 xxx749 Oct 29, 2019 via Android 学到了 |
5 cheeto Oct 29, 2019 https://stackoverflow.com/questions/42560540/what-happens-when-i-object-assign-to-a-primitive-type-in-Javascript colors.gray 是个 Object 没错,在使用${}模版字符串占位符时,应该就默认调用了它的 toString()方法吧,使其输出为#DDDDDD |
6 roscoecheung1993 Oct 29, 2019 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 Oct 29, 2019 学习一下 |
8 shiny PRO js 正是一门可以活到老学到老的语言,寿与天齐,千秋万载,一统江湖 |
9 howell5 OP @roscoecheung1993 @CoverL @cheeto @AlphaTr ok, 我 get 到了。返回的是 object 没错。忽略了 toString()的隐形触发 -_-|| 。 只有当实际使用到类似于${}自动触发或者自己手动触发 toString()去使用。感谢各位。 |
10 zbinlin Oct 29, 2019 你可以这样定义: var colors = { gray: { toString: () => "#DDDDDD", light: "#EEEEEE", dark: "#CCCCCC", }, }; '#DDDDDD' === `${colors.gray}` '#EEEEEEE' === `${colors.gray.light}` '#CCCCCC' === `${colors.gray.dark}` |
11 chuxiaonan Oct 29, 2019 toString() 可以做到 Proxy 应该也可以 |
12 chuxiaonan Oct 29, 2019 试了一下 Proxy 似乎并不可以 |
13 ssshooter Oct 29, 2019 via Android 有点意思 |
&bsp; 14 autoxbc Oct 30, 2019 基本包装类型另一个玩法是把包装作为容器,挂载一些私有数据上去 比如对一个基本类型数据做链式加工,原始值挂在包装上,可以在需要时提取出来 |
15 ruandao Oct 30, 2019 via iPhone div ' 的是什么无法? |
17 ericgui Oct 30, 2019 |