JavaScript Day 1. 基础字串处理

今天是「我的JavaScript日常」的第一天，希望能透过分享与大家一起学习、提升。

在我的学习经验中，刚开始学习 JavaScript 的时候，从字串开始练习感觉是能最快上手，并且不会有太多挫折感的，其中的好处是帮助我们快速建立一点 JavaScript 的基本观念，又因为概念很简单，其实在练习的时候会是一个很有趣的过程。

字串相加

这边我们练习字串与字串如何相加。

let friendName = 'Ada';
let content = '你好吗？';
console.log(friendName + content); // 'Ada你好吗？'

// 加上空白键的字串相加
console.log(friendName + ' ' + content); // 'Ada 你好吗？'

// 或是直接在宣告一个变数
let total = friendName + ' ' + content;
console.log(total); // 'Ada 你好吗？'

数字与字串相加

可以了解到字串与字串相加以及字串与数字相加，也可从中理解到 JavaScript 在什麽情况下会帮助转型。

let myName = 'Ada';
let age = 25;
let total = myName + age;
// 这个部分我们会看到，明明是数字，却变成字串了，
// 这里我们可以知道 JavaScript 在某些情况下，会为了尝试连接而转型
console.log(typeof total); // string

// 接着我们来尝试让它变成一个完整的句子
console.log('Hi 我是' + myName + ' ' + '我今年' + age + '岁。')
// Hi 我是Ada 我今年25岁。

NaN可能产生的情况

也补充一些字串有可能会出现 NaN 的情况，但不会很清楚的解释什麽是 NaN，简单来说这算是一种找不到数值的错误状态。

let myName = 'Ada';
let age = 25;
let total = myName * age;
console.log(total); // NaN

let age = '25'; // string

// parseInt 将字串转形成数字
let age = parseInt('25'); // number

// parseInt 无法将字串转型
let age = parseInt('Ada'); // NaN

计算字元 Length

length 其实是很好用的方法，针对能够计算字元的特性，能够使用在很多地方简单到只是计算字元，复杂到我们能够限制使用者输入的字数。

a = '154312';
console.log(a.length); // 6

// 再给一个有趣的范例
let name = ' Ada ';
console.log(name.length); // length 也会把空行算做字元，所以这边是 5

// 如果不希望空行被算进去，可以这样写
console.log(name.trim()); 
// trim 可以把头尾滤掉，这可以避免使用者在输入资讯时不小心空行的状态

记忆变数长度

上面我们已经知道 length 可以帮我们计算字元的长度，这边要再讨论假设我们希望 length 计算後的字元结果能够被记忆呢？其实也是非常简单就可以理解的方式。

let name = 'Ada';
let nameLength = name.length;
console.log(nameLength); // 3

样版字面值 (Template literals)

从第一跟第二个范例我们可以看到，字串的相加相当的冗长跟麻烦，但 ES6 改善了这样的冗长，接下来的字串相加会看起来非常的舒服不杂乱。

let myName = 'Ada';
let age = 25;
let content = `Hi，我是${myName}，我今年${age}岁。`;

console.log(content); // Hi，我是Ada，我今年25岁。

以上许多关於字串的例子在这里分享，这个部分还不会感受到 JavaScript 的难度，不过这里有很多地方其实也需要好好的记得并且熟练，在日後学到更多语法的时候会发现，很多都是来自於基础，能够熟透基础才能更加活用，至少现在的我是有感觉基础没有练熟的痛苦XD