• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

learn-co-students/javascript-strings-lab-js-apply-000

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

learn-co-students/javascript-strings-lab-js-apply-000

开源软件地址:

https://github.com/learn-co-students/javascript-strings-lab-js-apply-000

开源编程语言:

JavaScript 62.1%

开源软件介绍:

JavaScript Strings Lab

lab

Overview

In this lab, we're going to work with strings. Strings in JavaScript are wrapped in single or double quotes, or in back ticks.

Objectives

  1. Manipulate strings in JavaScript
  2. Practice interpolating with template literals

Introduction

Imagine we're planning a birthday party for Bill Nye. There are going to be a lot of people there, so we're going to use JavaScript to help us keep everything straight.

First, we need to practice greeting everyone. (I don't know about you, but I sometimes get nervous and say the dumbest things — but we don't want to embarrass ourselves in front of Bill Nye!)

One might think that we could just type

Hello, everybody!

in our browser's console and be done with it. Give it a try. (If you're on a Mac, that would be Command + Option + J together.)

You should see something like

Uncaught ReferenceError: Hello is not defined(…)

Well, that won't work. (This is why we practice!) In order to greet our guests, we need to tell JavaScript that we're using a string. A string is a collection of characters (letters, numbers, and symbols) wrapped in single or double quotes (or, as we'll see, in back ticks). So to greet everyone, we can write,

'Hello, everybody!'

or

"Hello, everybody!"

Single or double quotation marks can contain a string variable..

What if we want to say hi to a special guest, like Neil deGrasse Tyson? When we wrap strings in single or double quotes, we can join them together using the + operator:

var specialGuest = "Neil deGrasse Tyson"
"Hello, " + specialGuest + "!" // "Hello, Neil deGrasse Tyson!"

This is called concatenation. Notice that the value of the specialGuest variable is also a string!

TOP TIP: Your console might be getting a little full at this point. If at any point you'd like to clear it out and start fresh, you can either click the button in the top left corner of the console — in Chrome, it looks like this:

clear console

Alternatively, you can press ctrl + L or command + K. As long as you don't refresh the page, anything you've declared will stick around for you to reference — you'll just get a nice blank slate on which to code.

When we wrap strings in back ticks, we can use placeholders (${}) and insert variables or evaluated JavaScript directly:

var specialGuest = "Neil deGrasse Tyson";

`Hello, ${specialGuest}! High ${3 + 2}!` // "Hello, Neil deGrasse Tyson! High 5!"

This is called interpolation.

Lab

You'll find a file called index.js in this directory. Your mission, should you choose to accept it, is to get its tests (in tests/index-test.js) to pass.

You can run the tests using the learn command in your terminal or the Learn IDE. Give that a go now.

waiting

All three tests have failed! This is okay, and it's expected — you haven't written any code yet, after all.

In index.js, you'll see five lines of code:

var greeting = "";

var specialGuest = "Neil deGrasse Tyson"

var greetSpecialGuest = "" + specialGuest + "!";

var topic = "space";

var conversation = `${topic}`;

Each line has a test associated with it. When the tests fail, they show us what the expected value is — your job is to make that expectation a reality by modifying the code provided.

When you first run learn, you should see something like this:

All tests failing.

Let's walk through that first error together. First, we see the test title:

1) strings defines `greeting`:

The title tells us what the test expects our code to do. In this case, "strings" refers to the general problem space in which we're working — we're handling strings.

Continuing on with the test output, we can now make better sense of the next few lines:

AssertionError: '!' == 'Hello, everybody!'
+ expected - actual

- !
+Hello, everybody!

This is a lot to take in, so we'll go through it slowly.

What could AssertionError mean? Well, it probably means that our test asserted (or expected) that something would be true, and that thing wasn't true.

What is that thing? The test expected the empty string, '', to be equal to the string 'Hello, everybody!' — but, of course, these strings are not equal.

+ expected - actual is a key for reading the statements below it. + expected tells us that the expected output shows up in that yellowish green; - actual tells us what actually happened.

But reading on, we only see +Hello, everybody! — what's going on? Why isn't there any - actual output? Well, there was no actual output — it's just an empty string! That must be the problem!

Next, the title tells us that index.js "defines greeting." Let's look in index.js — sure enough, we see, at the top of the file, var greeting = "";. Seems like a reasonable place to start.

What if, instead of assigning "" to greeting, we assign "Hello, everybody!", like the test expects. Go ahead and change that line in index.js so it reads

var greeting = "Hello, everybody!";

save the file, and rerun your tests. You should see

First test passes!

Nice! You got the first test to pass.

Now use the skills that you learned above to read through the rest of the test output and fix those errors, too! Always remember to save your file before re-running your tests.

NOTE: Because we're dealing with some low-level language features, you might spot some easy ways to "cheat" on this lab, or this lab might seem frustratingly easy. We've given you some starter code to point you in the right direction — try to solve the lab as intended! You can then compare your solution with ours (found in the solution branch of this repository).

When your tests are passing, submit your answer by typing in learn submit in the command line or else create a pull request (use learn submit if "pull request" sounds a bit terrifying).

Good luck!

View JavaScript Strings Lab on Learn.co and start learning to code for free.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
intel/appframework: The definitive HTML5 mobile javascript framework发布时间:2022-07-07
下一篇:
Lision/WKWebViewJavascriptBridge: 发布时间:2022-07-07
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap