Introduction to Strings
Introduction to Strings
Fundamentals of Strings
Introduction
A string is a symbol or a group of symbols. A string can also be an empty space.
Practical Learning: Introducing Strings
body { background-color: #FFF; } .bold { font-weight: bold; } .common-font { font-family: Garamond, Georgia, 'Times New Roman', Times, serif; }
using System.Web.Optimization;
namespace TrafficTicketsManagement2
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/TrafficTicketsSystem.css"));
}
}
}
using System.Web.Mvc;
namespace TrafficTicketsManagement2.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult TrafficTicket() => View();
public ActionResult Citation() => View();
}
}
@{ ViewBag.Title = "Traffic Ticket"; } <h2 id="company">Traffic Ticket</h2> <p id="introduction"></p>
const corporation: HTMLElement = document.querySelector("#company"); const intro: HTMLElement = document.querySelector("#introduction");
A String Variable
In TypeScript, to declare a variable for a string, specify the data type as string.
Practical Learning: Declating String Variables
let identification: string;
const corporation: HTMLElement = document.querySelector("#company");
const intro: HTMLElement = document.querySelector("#introduction");
Initializing a String
The value of a string can be included in single-quotes or in double-quotes. To initialize a string variable, put its empty string, its character, or its group of characters in quotes.
Updating a String Variable
As mentioned in the previous lesson, after declaring a variable, anywhere in your document, you can assign a (new) value to the variable. Here is an example:
let identification: string; const corporation: HTMLElement = document.querySelector("#company"); const intro: HTMLElement = document.querySelector("#introduction"); identification = "Traffic Tickets Management";
If you are declaring a variable without initializing it, you can start the declaration with the declare keyword.
Practical Learning: Creating Strings
declare let identification: string; const corporation: HTMLElement = document.querySelector("#company"); const intro: HTMLElement = document.querySelector("#introduction"); identification = "Traffic Tickets Management"; corporation.innerHTML = identification; identification = "This application is used by the Solomons County Police Department to monitor and management road traffic for the safety of the county's citizens."; intro.innerHTML = identification;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Traffic Tickets System :: @ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Traffic Tickets System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Traffic Ticket", "TrafficTicket", "Home")</li> <li>@Html.ActionLink("Citation", "Citation", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p class="text-center common-font">© @DateTime.Now.Year - Traffic Tickets System</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>
@{
ViewBag.Title = "Traffic Ticket";
}
<h2 id="company">Traffic Ticket</h2>
<p id="introduction"></p>
<script src="~/Scripts/TicketsSystem.js"></script>
A Tagged String
In your string, you can include HTML tags. If you decide to do that, make sure you follow the rules of the language such as closing the tags. If you include a string in double-quotes (or in single-quotes), if a tag uses attributes, include the value of the attribute in single-quotes (or double-quotes).
Practical Learning: Adding Tagged to a String
declare let identification: string; const corporation: HTMLElement = document.querySelector("#company"); const intro: HTMLElement = document.querySelector("#introduction"); identification = "<span style='border-bottom: 1px dashed maroon; color: blue;'>Traffic Tickets Management</span>"; corporation.innerHTML = identification; identification = "<p class='common-font'>This application is used by the <span class='bold'>Solomons County Police Department</span> to monitor and management road traffic for the safety of the county's citizens.</p>"; intro.innerHTML = identification;
Operations on Strings
Adding Strings
If you have two string variables, to add them and get a new string, write their names separated by +. To add two constant strings, separate them with the + operator.
Practical Learning: Adding Strings
@{ ViewBag.Title = "Citation"; } <h2 class="text-center common-font bold">City of Jamies Town</h2> <h5 class="text-center common-font bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h5> <div class="row common-font"> <div class="col-md-8"> <h4 class="common-font bold"><span id="violationNumber"></span></h4> <h4 class="common-font bold"><span id="violationName"></span></h4> <hr /> <h4 class="common-font bold"><span id="driverName"></span></h4> <h5 class="common-font bold"><span id="driverAddress"></span></h5> <h5 class="common-font bold"><span id="vehicle"></span></h5> <hr /> <h5 class="common-font bold"><span id="driverName2"></span></h5> <p id="summary"></p> <p id="conclusion"></p> </div> </div>
let violationNbr: string = 'W829338'; let car: string = "Toyota Corolla, 2012, Silver"; let person: string = "Charlotte Bibang"; let adrs: string = "12382 Lolita Drive, Rockville, MD 20856"; let violationType: string = "Failure to Use Seat Belt"; let vDate: string = "2019-04-18"; let vTime: string = "22:27:34"; let vLocation: string = "1400 Block of Buffalo Drive"; let amt: string = "80"; let pmtDate: string = "2019-06-11"; const person1: HTMLElement = document.querySelector("#driverName"); const person2: HTMLElement = document.querySelector("#driverName2"); const address: HTMLElement = document.querySelector("#driverAddress"); person1.innerHTML = "Driver Name: " + person; person2.innerHTML = "To: " + person; address.innerHTML = "Driver Address: " + adrs; document.querySelector("#vehicle").innerHTML = "Vehicle: " + car; document.querySelector("#violationNumber").innerHTML = "Citation #: " + violationNbr; document.querySelector("#violationName").innerHTML = "Violation Type: " + violationType; document.querySelector("#summary").innerHTML = "Our records indicate that on <b>" + vDate + "</b> at <b>" + vTime + "</b>, at <b>" + vLocation + "</b>, the above mentioned vehicle committed a <b>" + violationType + "</b> violation."; document.querySelector("#conclusion").innerHTML = "If you recognize the traffic violation, please pay $" + amt + " by " + pmtDate + ". Failure to pay the amount by that date will result in an increase of the fine and could result in the suspension of your driving priviledges.";
@{
ViewBag.Title = "Citation";
}
<h2 class="text-center common-font bold">City of Jamies Town</h2>
<h5 class="text-center common-font bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h5>
<div class="row common-font">
<div class="col-md-8">
<h4 class="common-font bold"><span id="violationNumber"></span></h4>
<h4 class="common-font bold"><span id="violationName"></span></h4>
<hr />
<h4 class="common-font bold"><span id="driverName"></span></h4>
<h5 class="common-font bold"><span id="driverAddress"></span></h5>
<h5 class="common-font bold"><span id="vehicle"></span></h5>
<hr />
<h5 class="common-font bold"><span id="driverName2"></span></h5>
<p id="summary"></p>
<p id="conclusion"></p>
</div>
</div>
<script src="~/Scripts/Infraction.js"></script>
A Template String
We saw that you can add string constants and string variables to get a new string. TypeScript allows you to create a resulting solution in which you can include the names of variables in a a string so that the value of the string variable would be used in that placeholder. In such a string, the name of the variable must be included between ${ and }. This is referred to as a template string or string interpolation.
Converting a Value to a String
If you have a value in a type other than string, in order to use in some scenarios, such as to display that value in a webpage, you may have to convert that value to a string. To do this, type the value or the name of the variable, a period and toString().
Practical Learning: Converting a Value to a String
let violationNbr: string = 'W829338'; let car: string = "Toyota Corolla, 2012, Silver"; let person: string = "Charlotte Bibang"; let adrs: string = "12382 Lolita Drive, Rockville, MD 20856"; let violationType: string = "Failure to Use Seat Belt"; let vDate: string = "2019-04-18"; let vTime: string = "22:27:34"; let vLocation: string = "1400 Block of Buffalo Drive"; let amt: string = "80"; let pmtDate: string = "2019-06-11"; let photoAvailable: boolean = true; let videoAvailable: boolean = false; document.querySelector("#driverName").innerHTML = "Driver Name: " + person; document.querySelector("#driverName2").innerHTML = "To: " + person; document.querySelector("#driverAddress").innerHTML = "Driver Address: " + adrs; document.querySelector("#vehicle").innerHTML = "Vehicle: " + car; document.querySelector("#violationNumber").innerHTML = "Citation #: " + violationNbr; document.querySelector("#violationName").innerHTML = "Violation Type: " + violationType; document.querySelector("#summary").innerHTML = "Our records indicate that on <b>" + vDate + "</b> at <b>" + vTime + "</b>, at <b>" + vLocation + "</b>, the above mentioned vehicle committed a <b>" + violationType + "</b> violation."; document.querySelector("#conclusion").innerHTML = "If you recognize the traffic violation, please pay $" + amt + " by " + pmtDate + ". Failure to pay the amount by that date will result in an increase of the fine and could result in the suspension of your driving priviledges."; document.querySelector("#photo").innerHTML = photoAvailable.toString(); document.querySelector("#video").innerHTML = videoAvailable.toString();
@{
ViewBag.Title = "Citation";
}
<h2 class="text-center common-font bold">City of Jamies Town</h2>
<h5 class="text-center common-font bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h5>
<div class="row common-font">
<div class="col-md-8">
<h4 class="common-font bold"><span id="violationNumber"></span></h4>
<h4 class="common-font bold"><span id="violationName"></span></h4>
<hr />
<h4 class="common-font bold"><span id="driverName"></span></h4>
<h5 class="common-font bold"><span id="driverAddress"></span></h5>
<h5 class="common-font bold"><span id="vehicle"></span></h5>
<hr />
<h5 class="common-font bold"><span id="driverName2"></span></h5>
<p id="summary"></p>
<p id="conclusion"></p>
<hr />
<p><span style="font-weight: 600">Photo Available:</span> <span id="photo"></span></p>
<p><span style="font-weight: bold">Video Available:</span> <span id="video"></span></p>
</div>
</div>
<script src="~/Scripts/Infraction.js"></script>
A Constant String
A variable that holds a string is referred to as constant if its value never changes. The formula to declare such a variable is:
const variable-name : string = value;
You can omit the string data type.
Practical Learning: Using Constant Strings
const amt : string = "225"; const violationNbr : string = 'G383749'; const vTime : string = "07:18:27"; const pmtDate : string = "2019-06-30"; const vDate : string = "2019-04-26"; const person : string = "Ornella Chumsky"; const vLocation : string = "I270 Near Exit 10"; const car : string = "Ford Focus, 2019, Navy"; const violationType : string = "Illegal Car Pool Lane Driving"; const adrs : string = "3094 Serriella Rd, Landisburg, PA 17040"; let photoAvailable : boolean = true; let videoAvailable : boolean = false; document.querySelector("#driverName").innerHTML = "Driver Name: " + person; document.querySelector("#driverName2").innerHTML = "To: " + person; document.querySelector("#driverAddress").innerHTML = "Driver Address: " + adrs; document.querySelector("#vehicle").innerHTML = "Vehicle: " + car; document.querySelector("#violationNumber").innerHTML = "Citation #: " + violationNbr; document.querySelector("#violationName").innerHTML = "Violation Type: " + violationType; document.querySelector("#summary").innerHTML = "Our records indicate that on <b>" + vDate + "</b> at <b>" + vTime + "</b>, at <b>" + vLocation + "</b>, the above mentioned vehicle committed a <b>" + violationType + "</b> violation."; document.querySelector("#conclusion").innerHTML = "If you recognize the traffic violation, please pay $" + amt + " by " + pmtDate + ". Failure to pay the amount by that date will result in an increase of " + "the fine and could result in the suspension of your driving priviledges."; document.querySelector("#photo").innerHTML = photoAvailable.toString(); document.querySelector("#video").innerHTML = videoAvailable.toString();
|
||
Previous | Copyright © 2018-2019, FunctionX | Next |
|