javascript学习笔记---“+”的用法

该博客主要围绕JavaScript运算符展开。提到拼接变量时,只要有一个变量是字符串,其他变量也会转为字符串,且运算方向从左至右,除 + 外其他运算符会进行字符串转数字运算;还介绍了将字符转换成Num的情况,单个Num类型前加 + 无用,非数字变量加 + 会被转化为数字。

原文:https://zh.javascript.info/operators

怕看了就忘记,决定敲一遍&抄一边

1.拼接变量

a.都是字符串

let s = "my" + "string";
alert(s); // mystring

b.只要任一变量是字符串,那么其它变量也会转化为字符串

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21

如果是多变量运算,前几个是Num,最后是字符串,则会先做运算再拼接(运算符的运算方向是由左至右

alert(2 + 2 + '1' ); // "41" 而不是 "221"

p:除了+运算符外其他-、*、%不具备这特性,其他运算符会进行字符串转数字运算,如

alert( 2 - '1' ); // 1
alert( '6' / '2' ); // 3

2.将字符转换成Num

a.在单个Num类型前添加+是没有用的

// 对数字无效
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

b.如果变量是非数字,+会将其转化为数字

// 转化非数字
alert( +true ); // 1
alert( +"" );   // 0

let apples = "2";
let oranges = "3";

// 在二元运算符加号起作用之前,所有的值都转为数字
alert( +apples + +oranges ); // 5

// 上面等同于下面这语句,但下面这个复杂一些
alert( Number(apples) + Number(oranges) ); // 5

 

命名视图 在 Vue School 上观看免费视频课程 有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。 <router-view class="view left-sidebar" name="LeftSidebar" /> <router-view class="view main-content" /> <router-view class="view right-sidebar" name="RightSidebar" /> 一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s): const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', components: { default: Home, // LeftSidebar: LeftSidebar 的缩写 LeftSidebar, // 它们与 `<router-view>` 上的 `name` 属性匹配 RightSidebar, }, }, ], }) 以上案例相关的可运行代码请移步这里. 嵌套命名视图 我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例: /settings/emails /settings/profile +-----------------------------------+ +------------------------------+ | UserSettings | | UserSettings | | +-----+-------------------------+ | | +-----+--------------------+ | | | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | | | +-------------------------+ | | | +--------------------+ | | | | | | | | | UserProfilePreview | | | +-----+-------------------------+ | | +-----+--------------------+ | +-----------------------------------+ +------------------------------+ Nav 只是一个常规组件。 UserSettings 是一个视图组件。 UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。 注意:我们先忘记 HTML/CSS 具体的布局的样子,只专注在用到的组件上。 UserSettings 组件的 <template> 部分应该是类似下面的这段代码: <!-- UserSettings.vue --> <div> <h1>User Settings</h1> <NavBar /> <router-view /> <router-view name="helper" /> </div> 那么你就可以通过这个路由配置来实现上面的布局: { path: '/settings', // 你也可以在顶级路由就配置命名视图 component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] } 以上案例相关的可运行代码请移步这里. ✨ 自信地编写 Vue 应用的 Vibe 代码 RuleKit 根据以上内容做一份学习笔记,要详细,内容要丰富。要做总结,最好绘制图表方便学习
最新发布
09-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值